/* ============================================================
   CUTIE NAILS — Secondary pages
   for-brands.html and press.html.
   Requires tokens.css + base.css. Chrome comes from chrome.css.
   ============================================================ */

.page { padding-top: var(--nav-height); }

/* ---------- Page hero ---------- */
.page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--gradient-soft);
  padding: var(--space-20) 0 var(--space-16);
}
.page-hero .blob { z-index: var(--z-base); }
.page-hero__blob { width: 460px; height: 460px; top: -180px; right: -140px; opacity: 0.4; }

.page-hero__inner {
  position: relative;
  z-index: var(--z-raised);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  max-width: 720px;
}
.page-hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}
.page-hero__sub {
  font-size: var(--text-lg);
  color: var(--text-body);
  line-height: var(--leading-normal);
  max-width: 56ch;
}

/* ---------- Generic content section ---------- */
.page-section { padding: var(--space-section) 0; }
.page-section--sunk { background: var(--surface-sunk); }

.page-section h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  margin-bottom: var(--space-6);
}
.page-section > .container > p {
  font-size: var(--text-md);
  color: var(--text-body);
  line-height: var(--leading-normal);
  max-width: 62ch;
  margin-bottom: var(--space-4);
}

/* ---------- Value cards ---------- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}
.value-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--shadow-sm);
}
.value-card h3 { font-size: var(--text-lg); font-weight: 600; }
.value-card p {
  font-size: var(--text-base);
  color: var(--text-body);
  line-height: var(--leading-normal);
}

/* ---------- Numbered steps ---------- */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-10);
}
.steps-grid .how__step-num,
.step-num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--petal-pink);
}
.steps-grid > div { display: flex; flex-direction: column; gap: var(--space-3); }
.steps-grid h3 { font-size: var(--text-xl); font-weight: 600; }
.steps-grid p {
  font-size: var(--text-base);
  color: var(--text-body);
  line-height: var(--leading-normal);
}

/* ---------- Split with imagery ---------- */
.page-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-16);
  align-items: center;
}
.page-split__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.page-split__copy p {
  font-size: var(--text-md);
  color: var(--text-body);
  line-height: var(--leading-normal);
  max-width: 52ch;
}
.page-split__shot {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  max-height: 480px;
}
.page-split__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ---------- Facts table (press) ---------- */
.facts {
  width: 100%;
  border-collapse: collapse;
  max-width: 760px;
}
.facts th, .facts td {
  text-align: left;
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  vertical-align: top;
}
.facts th {
  width: 34%;
  font-weight: 600;
  color: var(--text-primary);
}
.facts td { color: var(--text-body); }
.facts a { color: var(--rose-gold); }

/* ---------- Callout ---------- */
.callout {
  background: var(--surface-inverse);
  color: var(--text-inverse);
  border-radius: var(--radius-md);
  padding: var(--space-10);
  max-width: 760px;
}
.callout h2 { color: var(--text-inverse); margin-bottom: var(--space-4); }
.callout p {
  font-size: var(--text-md);
  color: var(--text-inverse-muted);
  line-height: var(--leading-normal);
  max-width: none;
}

/* ---------- Closing CTA ---------- */
.page-cta {
  background: var(--surface-inverse);
  color: var(--text-inverse);
  padding: var(--space-section) 0;
  text-align: center;
}
.page-cta__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.page-cta h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: var(--leading-snug);
  color: var(--text-inverse);
  letter-spacing: var(--tracking-display);
}
.page-cta p {
  font-size: var(--text-md);
  color: var(--text-inverse-muted);
  max-width: 52ch;
  line-height: var(--leading-normal);
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .value-grid, .steps-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .page-split { grid-template-columns: 1fr; gap: var(--space-10); }
  .page-split__copy { align-items: center; text-align: center; }
  .page-split__copy p { max-width: 56ch; }
}

@media (max-width: 600px) {
  .facts th, .facts td { display: block; width: 100%; border-bottom: none; padding-bottom: 0; }
  .facts td { padding-top: var(--space-1); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
  .callout { padding: var(--space-8) var(--space-6); }
}