/* No Brainer Water Co. - info pages (how-it-works, why-no-brainer, install-help).
   Agent C-owned. Uses tokens.css + layout.css primitives, adds only what
   those three pages need. */

/* hero split */
.hero-info { display: grid; gap: 2.4rem; align-items: center; }
@media (min-width: 1000px) {
  .hero-info { grid-template-columns: 1.05fr 0.95fr; gap: 3rem; }
}
.hero-info img { width: 100%; height: auto; }

/* numbered step rows */
.step-row { display: grid; gap: 1.8rem; align-items: center; }
@media (min-width: 1000px) {
  .step-row { grid-template-columns: 0.85fr 1.15fr; gap: 3.2rem; }
  .step-row--media-right { grid-template-columns: 1.15fr 0.85fr; }
  .step-row--media-right .step-row__media { order: 2; }
}
.step-num {
  font-size: 3rem;
  font-weight: var(--w-medium);
  opacity: 0.3;
  line-height: 1;
  margin: 0 0 0.6rem;
}

/* worked-example maths card */
.maths-card {
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--radius-card);
  padding: 1.5rem 1.7rem;
  font-size: var(--text-sm);
  line-height: 1.65;
  margin-top: 1.5rem;
}
.maths-card .tag {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 0.7rem;
}

/* small stat chip row */
.chip-row { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .chip-row { grid-template-columns: repeat(3, 1fr); } }
.chip {
  background: rgb(var(--paper));
  border-radius: var(--radius-card);
  padding: 1.3rem 1.4rem;
  border: 1px solid rgb(var(--ink) / 0.1);
  font-size: var(--text-sm);
}
.chip strong { display: block; font-weight: var(--w-medium); margin-bottom: 0.3rem; }

/* plan tier cards */
.tier-card { position: relative; }
.tier-card--rec { box-shadow: 0 0 0 2px rgb(var(--accent)); }
.tier-card__badge {
  position: absolute; top: -0.7rem; left: 1.5rem;
  background: rgb(var(--accent)); color: rgb(var(--accent-ink));
  font-size: var(--text-xs); font-weight: var(--w-medium);
  padding: 0.3rem 0.8rem; border-radius: 999px; letter-spacing: 0.03em;
}
.tier-card__price { font-size: 1.7rem; font-weight: var(--w-medium); margin: 0.5rem 0 0.9rem; }
.tier-card__price span { font-size: var(--text-sm); font-weight: var(--w-regular); opacity: 0.6; }

/* certification chips */
.cert-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1.6rem 0 0; }
.cert-chip { display: inline-block; padding: 0.55rem 1.1rem; border-radius: 999px;
  border: 1.5px solid rgb(255 255 255 / 0.35); color: #fff;
  font-size: var(--text-sm); font-weight: var(--w-medium); background: transparent; }
.sec--light .cert-chip, .sec--dim .cert-chip { border-color: rgb(var(--ink) / 0.25); color: rgb(var(--ink)); }

/* NEEDS MASON placeholder */
.needs-mason {
  border: 1.5px dashed rgb(var(--ink) / 0.32);
  border-radius: var(--radius-card);
  padding: 1.2rem 1.4rem;
  font-style: italic;
  opacity: 0.8;
  font-size: var(--text-sm);
  margin-top: 1.2rem;
}
.sec--dark .needs-mason, .sec--dark2 .needs-mason { border-color: rgb(255 255 255 / 0.32); }

/* guarantee grid */
.guarantee-grid { display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .guarantee-grid { grid-template-columns: repeat(3, 1fr); } }

/* job card spec sheet */
.jobcard { border-radius: var(--radius-card); overflow: hidden; border: 1px solid rgb(var(--ink) / 0.14); }
.jobcard__row {
  display: grid; grid-template-columns: 1fr 1.5fr; gap: 1rem;
  padding: 1rem 1.3rem; border-top: 1px solid rgb(var(--ink) / 0.1);
  font-size: var(--text-sm);
}
.jobcard__row:first-child { border-top: 0; }
.jobcard__row dt { font-weight: var(--w-medium); margin: 0; }
.jobcard__row dd { margin: 0; opacity: 0.85; }

/* call / book-a-call block */
.call-block { display: grid; gap: 2.2rem; }
@media (min-width: 1000px) { .call-block { grid-template-columns: 0.8fr 1.2fr; } }
.call-cta .num { font-size: 2rem; font-weight: var(--w-medium); display: block; margin: 0.4rem 0 0.8rem; }
.book-form { display: grid; gap: 0.9rem; max-width: 440px; }
.book-form label {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em;
  opacity: 0.65; display: block; margin-bottom: 0.35rem;
}
.book-form input, .book-form select {
  width: 100%; border-radius: 12px; border: 1px solid rgb(var(--ink) / 0.2);
  padding: 0.75rem 0.9rem; font: inherit; background: rgb(var(--paper)); color: rgb(var(--ink));
}
.book-form__status {
  display: none; border-radius: 12px; padding: 0.9rem 1.1rem; font-size: var(--text-sm);
}
.book-form__status.is-visible { display: block; }
.book-form__status--ok { background: rgb(35 160 90 / 0.14); }
.book-form__status--fail { background: rgb(200 70 60 / 0.14); }

.trust-note { font-size: var(--text-xs); opacity: 0.5; margin-top: 0.6rem; }

.cta-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* newsletter form in footer - inherits .footer__signup input from layout.css */
.footer__signup form { display: flex; gap: 0.6rem; max-width: 360px; }
.footer__signup p { font-size: var(--text-sm); opacity: 0.75; margin: 0.5rem 0 1.1rem; }

/* founder note */
.founder { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .founder { grid-template-columns: 280px 1fr; } }
.founder__photo { width: 100%; max-width: 280px; border-radius: var(--radius-media); }
.founder__sign { font-weight: var(--w-medium); margin-top: 1.4rem; opacity: 0.85; }

/* how-it-works hero: blended full-height media, homepage treatment */
.hiw-hero { background-image: radial-gradient(50% 55% at 88% 15%, rgb(var(--accent) / 0.12), transparent 70%); }
.hiw-hero .hero-info { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1000px) { .hiw-hero .hero-info { grid-template-columns: 1fr 1fr; min-height: 560px; } }
.hiw-hero__media img { width: 100%; height: 100%; min-height: 440px; object-fit: cover; border-radius: var(--radius-media);
  -webkit-mask-image: radial-gradient(120% 120% at 50% 45%, #000 55%, transparent 98%);
  mask-image: radial-gradient(120% 120% at 50% 45%, #000 55%, transparent 98%); }
.step-media img { width: 100%; height: 380px; object-fit: cover; border-radius: var(--radius-media); }
.hww-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1000px) { .hww-grid { grid-template-columns: 1.1fr 1fr; } }
.hww-grid img { width: 100%; height: 420px; object-fit: cover; }
.promise-grid { margin-top: 2rem; }
.promise { border: 1px solid rgb(var(--ink) / 0.12); border-radius: var(--radius-card); padding: 2rem; }
.promise h3 { margin-bottom: 0.8rem; }
.promise p { margin: 0; font-size: var(--text-lg); opacity: 0.85; }
.sec--dark .promise, .sec--dark2 .promise { border-color: rgb(255 255 255 / 0.14); }