/* =============================================================================
   /algaecal/ — the AlgaeCal product page.
   =============================================================================
   Scoped under .ac-page so it sits on top of styles.css without fighting it:
   the site stylesheet supplies the fonts, the reset and the header/footer,
   this file supplies the page.

   The palette is AlgaeCal's, not the site's: a deeper green (#0E4A3B) and a
   brighter yellow (#E8B637) than --green/--clay. That is deliberate in the
   handoff — the page is co-branded. The site header and footer keep their own
   colours above and below it, which reads as a branded section rather than a
   different website.

   Typography is the site's (Newsreader + Hanken Grotesk) rather than the
   handoff's Spectral + Jost + IBM Plex Mono. The handoff allows this ("if the
   site already has a heading serif, use that one"), and it avoids loading
   three more font families for one page.
   ========================================================================== */

.ac-page {
  --ac-green-900: #0E4A3B;
  --ac-green-700: #0B6B50;
  --ac-green-200: #9FD3BE;
  --ac-green-100: #D6E4DE;
  --ac-yellow: #E8B637;
  --ac-orange: #C2571A;
  --ac-ink: #16201C;
  --ac-body: #3A4541;
  --ac-muted: #5A6561;
  --ac-on-dark: #EDEDE8;
  --ac-on-dark-2: #D9D9D4;
  --ac-line: #DADDD8;
  --ac-line-2: #E3E5E1;
  --ac-line-dark: #34333A;
  --ac-page-bg: #FAFAF7;
  --ac-tile: #F0F1ED;
  --ac-dark: #161519;

  background: var(--ac-page-bg);
  color: var(--ac-body);
}

.ac-wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 600px) { .ac-wrap { padding: 0 24px; } }
.ac-sec { padding: clamp(56px, 7vw, 104px) 0; }

.ac-page h1, .ac-page h2, .ac-page h3 { font-family: var(--serif); font-weight: 500; color: var(--ac-green-900); margin: 0; }
.ac-page p { margin: 0; }
.ac-page ul, .ac-page ol { margin: 0; padding: 0; list-style: none; }

.ac-eyebrow {
  font-family: var(--sans); font-weight: 600; font-size: 0.85rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ac-green-700);
}
.ac-label {
  font-family: var(--sans); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* --- buttons ------------------------------------------------------------- */
.ac-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; padding: 14px 26px; font-family: var(--sans);
  font-weight: 600; font-size: 0.98rem; text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; transition: background .15s, color .15s, opacity .15s;
}
.ac-btn-yellow { background: var(--ac-yellow); color: #16201C; }
.ac-btn-yellow:hover { background: #d7a62c; color: #16201C; }
.ac-btn-outline { border-color: currentColor; background: transparent; color: var(--ac-green-900); }
.ac-btn-outline:hover { background: var(--ac-green-900); color: #fff; }
.ac-btn-on-dark { border-color: rgba(255,255,255,0.45); color: #fff; background: transparent; }
.ac-btn-on-dark:hover { background: #fff; color: var(--ac-ink); }
.ac-btn-white { background: #fff; color: var(--ac-green-900); }
.ac-btn-white:hover { background: var(--ac-green-100); }

/* --- promo bar, above the site header ------------------------------------ */
.ac-promo {
  background: var(--ac-yellow); color: #111; text-align: center;
  padding: 11px 24px; font-family: var(--sans); font-weight: 500; font-size: 0.94rem;
}
.ac-promo a { color: #111; font-weight: 700; text-decoration: underline; }

/* --- hero ---------------------------------------------------------------- */
.ac-hero { padding-top: clamp(40px, 5vw, 72px); }
.ac-hero .ac-eyebrow, .ac-hero h1 { text-align: center; }
.ac-hero h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.25rem); line-height: 1.04;
  max-width: 1000px; margin: 14px auto 0; text-wrap: balance;
}
.ac-duo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 16px; margin-top: clamp(32px, 4vw, 52px);
}
.ac-duo-card { border-radius: 20px; overflow: hidden; }
.ac-duo-card img { width: 100%; aspect-ratio: 1 / 0.85; height: auto; object-fit: cover; display: block; }
.ac-duo-body { padding: 36px 40px 40px; }
.ac-duo-body h2 { font-size: clamp(1.6rem, 2.6vw, 2.15rem); line-height: 1.12; margin: 10px 0 12px; color: #fff; }
.ac-duo-body p { line-height: 1.6; }
.ac-duo-a { background: var(--ac-green-900); }
.ac-duo-a .ac-label { color: var(--ac-green-200); }
.ac-duo-a p { color: var(--ac-green-100); }
.ac-duo-b { background: var(--ac-dark); }
.ac-duo-b .ac-label { color: var(--ac-yellow); }
.ac-duo-b p { color: var(--ac-on-dark-2); }
.ac-jump { display: inline-block; margin-top: 18px; color: var(--ac-green-200); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }
.ac-jump:hover { color: #fff; }
.ac-duo-b .ac-btn { margin-top: 20px; }

/* --- value stripe -------------------------------------------------------- */
/* .ac-page ul sets margin:0 and outranks a plain .ac-value, which is why the
   stripe was sitting flush against the hero cards -- hence the extra class. */
.ac-page .ac-value {
  background: #fff; border: 1px solid var(--ac-line-2); border-radius: 20px;
  padding: 36px 44px; margin: clamp(48px, 6vw, 80px) 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px 40px;
}
.ac-value h3 { font-family: var(--sans); font-weight: 700; font-size: 1.1rem; color: var(--ac-green-900); margin: 0 0 6px; }
.ac-value p { font-size: 0.95rem; line-height: 1.55; }
/* Two columns rather than an absolutely positioned dot: the dot then shares a
   baseline grid with the heading and wrapped body text stays flush with the
   heading above it instead of hanging under the dot. */
.ac-value li { display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.ac-value li::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--ac-green-700); margin-top: 0.45em;
}
.ac-value li > * { grid-column: 2; }

/* --- the lineup ---------------------------------------------------------- */
.ac-lineup-head h2 { font-size: clamp(2rem, 3.6vw, 2.75rem); line-height: 1.1; margin-top: 12px; }
.ac-row {
  display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: center;
  padding: 32px 0; border-bottom: 1px solid var(--ac-line);
}
.ac-row:first-of-type { border-top: 1px solid var(--ac-line); }
.ac-row-img { flex: 1 1 340px; max-width: 440px; }
.ac-row-img img {
  width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover;
  border-radius: 16px; background: var(--ac-tile); display: block;
}
.ac-row-text { flex: 1 1 280px; }
.ac-row-text h3 { font-size: clamp(1.5rem, 2.4vw, 2.15rem); line-height: 1.12; margin: 8px 0 12px; }
.ac-row-text p { font-size: 1.04rem; line-height: 1.6; max-width: 560px; margin-bottom: 20px; }
.ac-tag-green { color: var(--ac-green-700); }
.ac-tag-orange { color: var(--ac-orange); }

/* --- maximize band ------------------------------------------------------- */
.ac-max {
  background: var(--ac-dark); border-radius: 24px; overflow: hidden;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
}
.ac-max-copy { padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 56px); }
.ac-max-copy h2 { font-size: clamp(2rem, 3.8vw, 3rem); line-height: 1.08; color: #fff; margin: 12px 0 18px; }
.ac-max-copy > p { color: var(--ac-on-dark-2); line-height: 1.65; max-width: 52ch; }
.ac-steps { margin: 28px 0; }
.ac-steps li {
  display: flex; gap: 18px; align-items: baseline;
  padding: 16px 0; border-top: 1px solid var(--ac-line-dark);
  color: var(--ac-on-dark); line-height: 1.5;
}
.ac-steps li:last-child { border-bottom: 1px solid var(--ac-line-dark); }
.ac-steps b { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; color: var(--ac-yellow); flex: none; }
.ac-max-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.ac-mosaic {
  display: grid; grid-template-rows: minmax(260px, 1fr) auto; gap: 6px;
  padding: 6px 6px 6px 0;
}
@media (max-width: 900px) { .ac-mosaic { padding: 0 6px 6px; } }
.ac-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ac-mosaic-top { border-radius: 18px 18px 0 0; overflow: hidden; }
.ac-mosaic-top img { object-position: 50% 55%; }
.ac-mosaic-row { display: grid; grid-template-columns: 1fr 1.6fr; gap: 6px; }
.ac-mosaic-row > div { overflow: hidden; }
.ac-mosaic-row > div:first-child { border-radius: 0 0 0 18px; }
.ac-mosaic-row > div:last-child { border-radius: 0 0 18px 0; }
.ac-mosaic-row img:first-of-type { object-position: 50% 0%; }
/* The ratio is what keeps both faces and the gold logo on the machine in frame.
   height:auto is required: the height:100% above would otherwise win and the
   aspect-ratio would be ignored, which crops the heads off. */
.ac-mosaic-wide img { height: 100%; object-position: 50% 18%; }

/* --- complete bone plan -------------------------------------------------- */
.ac-plan h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.1; margin-top: 12px; }
.ac-plan-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px;
  margin-top: 40px; border-top: 1.5px solid var(--ac-green-900); padding-top: 28px;
}
.ac-plan-grid h3 { font-size: 1.4rem; margin: 10px 0 10px; }
.ac-plan-grid p { font-size: 0.98rem; line-height: 1.6; margin-bottom: 14px; }
.ac-plan-grid a { color: var(--ac-green-700); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }
.ac-plan-grid a:hover { color: var(--ac-green-900); }

/* --- visit --------------------------------------------------------------- */
.ac-visit {
  background: var(--ac-green-900); border-radius: 20px; color: #fff;
  padding: clamp(32px, 4vw, 56px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 36px 48px;
}
.ac-visit h2 { color: #fff; font-size: clamp(1.8rem, 3.2vw, 2.5rem); line-height: 1.1; margin: 12px 0 14px; }
.ac-visit .ac-label { color: var(--ac-green-200); }
.ac-visit p { color: var(--ac-green-100); line-height: 1.65; }
.ac-visit-info dt { font-family: var(--sans); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ac-green-200); margin-top: 18px; }
.ac-visit-info dt:first-child { margin-top: 0; }
.ac-visit-info dd { margin: 6px 0 0; font-size: 1.05rem; line-height: 1.5; color: #fff; }
.ac-visit-info a { color: #fff; text-decoration: none; }
.ac-visit-info a:hover { color: var(--ac-yellow); }
.ac-visit-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* --- faq ----------------------------------------------------------------- */
.ac-faq { display: grid; grid-template-columns: minmax(220px, 0.6fr) 1.4fr; gap: 32px 56px; align-items: start; }
@media (max-width: 860px) { .ac-faq { grid-template-columns: 1fr; } }
.ac-faq h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.1; }
.ac-acc { border-top: 1px solid var(--ac-line); }
.ac-acc > div { border-bottom: 1px solid var(--ac-line); }
.ac-q {
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 0; font-family: var(--sans); font-weight: 600; font-size: 1.08rem;
  color: var(--ac-green-900);
}
.ac-q span { font-size: 1.6rem; font-weight: 400; color: var(--ac-green-700); flex: none; line-height: 1; }
.ac-a { display: none; padding: 0 0 24px; font-size: 1.02rem; line-height: 1.65; max-width: 62ch; }
.ac-q[aria-expanded="true"] + .ac-a { display: block; }

/* --- disclaimer ---------------------------------------------------------- */
.ac-disclaimer {
  border-top: 1px solid var(--ac-line); padding: 26px 0 0; margin-top: 8px;
  font-size: 0.82rem; line-height: 1.6; color: var(--ac-muted);
}

/* --- sticky mobile CTA --------------------------------------------------- */
@media (max-width: 760px) {
  .ac-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--ac-yellow); padding: 12px 16px; text-align: center;
    box-shadow: 0 -6px 20px rgba(0,0,0,0.14);
  }
  .ac-sticky .ac-btn { width: 100%; max-width: 420px; background: var(--ac-dark); color: #fff; }
  .ac-page { padding-bottom: 72px; }
}
@media (min-width: 761px) { .ac-sticky { display: none; } }