/*
 * Sendtide public site: the few rules app.css and brand.css do not have.
 * Source: site/assets/site.css. npm run build:site copies it to public/site.css.
 * Load order: app.css (design system), site.css, then /assets/brand.css (v3 "Cobalt Night" tokens and components).
 * The accent, the night bands and the brand mark come from brand.css; nothing here sets a colour of its own.
 */

/* ---- staging band under the header: only in a staging build ---- */

.staging-band {
  background: var(--warn-soft);
  border-bottom: 1px solid var(--warn-line);
  color: var(--text);
}

.staging-band p {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--s3) var(--s4);
  font-size: var(--fs-sm);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* ---- the page frame in brand.css has no top padding, so the first block gets room under the sticky header ---- */

.site .mwrap > :first-child:not(.lp-full) {
  margin-top: clamp(28px, 4vw, 56px);
}

.site .pg-head h1 {
  font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin: 0 0 var(--s4);
  max-width: 22ch;
}

.site .pg-head .lede {
  font-size: 1.125rem;
  max-width: 62ch;
  margin: 0 0 var(--s6);
}

/* Cards that open with a small kicker: the heading sits right under it. */
.site .section .card .kicker + h2 {
  margin-top: 0;
}

/* ---- breadcrumb above a guide ---- */

.crumb {
  margin: 0 0 var(--s4);
  font-size: var(--fs-sm);
}

.crumb a {
  color: var(--text-dim);
}

/* ---- three cards in a row (modes, guides) ---- */

.site .cards3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
}

.site .cards3 > * {
  min-width: 0;
}

.site .cards3 h3 {
  margin-top: 0;
}

.site .price {
  font-size: 1.75rem;
  font-weight: 650;
}

/* ---- four-step list of the pre-send check ---- */

.steps4 {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.steps4 li {
  counter-increment: step;
  min-width: 0;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s5);
  box-shadow: var(--shadow-xs);
}

.steps4 li::before {
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 650;
  font-size: var(--fs-sm);
  margin-bottom: var(--s3);
}

.steps4 li > strong {
  display: block;
  font-size: var(--fs-md);
  margin-bottom: 4px;
}

.steps4 li > p {
  margin: 0;
  color: var(--text-dim);
  font-size: var(--fs-sm);
}

/* ---- long words never push the page sideways ---- */

.legal,
.guide,
.mwrap .card,
.mwrap .plan,
.steps4 li {
  overflow-wrap: anywhere;
}

.sitefoot-brand p {
  overflow-wrap: anywhere;
}

.guide code,
.mwrap .card code,
.legal code {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ---- guides: the numbered how-to reads as steps ---- */

.guide ol[data-howto] {
  padding-left: 1.4rem;
}

.guide ol[data-howto] li {
  padding-left: 4px;
}

.site .sitefoot .brand {
  color: var(--text);
}

/* ---- the closing band: buttons wrap instead of overflowing ---- */

.site .cta-band .btn {
  white-space: normal;
  text-align: center;
}

@media (max-width: 1000px) {
  .steps4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .site .cards3,
  .steps4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .site .cta-band .row .btn {
    width: 100%;
  }
}

/* Founding offer line (FOUNDING40), removed by /assets/founding.js after 30 Nov 2026 */
.founding { margin: 6px 0 0; font-size: 0.95rem; font-weight: 600; color: var(--accent); }
.lp-price [data-founding] { font-weight: 600; }