/* ===========================================================
   RiverNLP — brand stylesheet
   Palette + type per agency/projects/rivernlp/session-log.md
   Aesthetic: "Rainbow Sketch Realism" — warm kraft ground,
   prismatic color as LIGHT, never flat corporate vector.
   =========================================================== */

:root {
  /* Neutrals */
  --paper:     #FAF4E8;
  --kraft:     #C7AC8A;
  --graphite:  #403327;
  --ink-soft:  #6B5B4C;

  /* Heritage */
  --river-blue: #1E6FAD;

  /* Savings red.
     NOT a brand palette colour — the palette has no red. Chosen warm (brick,
     not retail-sale scarlet) so it sits with the kraft ground, and dark enough
     to clear WCAG AA on white (~5.4:1). To move it onto the brand palette
     instead, swap this one value for the prism magenta #E8439A. */
  --sale: #C0392B;

  /* Prism */
  --p-teal:    #1FBFAE;
  --p-blue:    #2E86C9;
  --p-green:   #78CD6E;
  --p-orange:  #F6A03C;
  --p-magenta: #E8439A;
  --p-violet:  #9C5CF0;

  --prism-gradient: linear-gradient(
    90deg,
    var(--p-teal), var(--p-blue), var(--p-violet),
    var(--p-magenta), var(--p-orange), var(--p-green)
  );

  --display: 'Baloo 2', 'Trebuchet MS', sans-serif;
  --body: 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hand: 'Caveat', cursive;

  --measure: 42rem;
  --radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(199,172,138,.35), transparent 70%);
  color: var(--graphite);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--graphite);
  margin: 0 0 .5em;
}

h1 { font-size: clamp(2rem, 5vw, 2.9rem); }
h2 { font-size: clamp(1.4rem, 3.4vw, 1.9rem); margin-top: 2.2em; }
h3 { font-size: 1.15rem; margin-top: 1.8em; }

p { margin: 0 0 1.15em; }

a { color: var(--river-blue); text-underline-offset: 3px; }
a:hover { color: var(--p-violet); }

/* ---------- Layout ---------- */

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.35rem;
}

.wrap--wide { max-width: 58rem; }

/* Prism hairline used as a section divider / top rule */
.prism-rule {
  height: 4px;
  border: 0;
  border-radius: 4px;
  background: var(--prism-gradient);
  margin: 0;
}

.prism-rule--soft { opacity: .55; margin: 3rem 0; }

/* ---------- Header ---------- */

.site-header {
  text-align: center;
  padding: 3.2rem 1.35rem 1rem;
}

.site-header img {
  width: 100%;
  max-width: 340px;
  height: auto;
}

.tagline {
  font-family: var(--hand);
  font-size: 1.5rem;
  color: var(--ink-soft);
  margin: .35rem 0 0;
}

/* ---------- Landing (index) ---------- */

.landing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.35rem 4rem;
}

.landing__eyebrow {
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--p-teal);
  margin-bottom: .9rem;
}

.landing__lede {
  font-size: 1.2rem;
  color: var(--ink-soft);
  max-width: 34rem;
  margin: 0 auto 2rem;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  background: var(--river-blue);
  color: #fff;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  padding: .85rem 1.9rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .15s ease, background-color .15s ease;
}

.btn:hover {
  background: var(--p-violet);
  color: #fff;
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--river-blue);
  box-shadow: inset 0 0 0 2px var(--river-blue);
}

.btn--ghost:hover {
  background: var(--river-blue);
  color: #fff;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  justify-content: center;
  margin: 1.5rem 0;
}

/* ---------- Article ---------- */

.article { padding: 1rem 0 4rem; }

.article__meta {
  font-size: .85rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 700;
  margin-bottom: .4rem;
}

.article__lede {
  font-size: 1.16rem;
  color: var(--ink-soft);
}

/* Callout card */
.card {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  margin: 1.8rem 0;
  box-shadow: 0 1px 2px rgba(64,51,39,.06), 0 8px 24px rgba(64,51,39,.06);
  border-left: 5px solid var(--p-teal);
}

.card h3 { margin-top: 0; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }

.card--warn  { border-left-color: var(--p-orange); }
.card--joy   { border-left-color: var(--p-magenta); }
.card--soon  { border-left-color: var(--p-violet); background: #fffdf9; }

/* Steps */
.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 1.4rem 0;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 3rem;
  margin-bottom: 1.1rem;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -1px;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--river-blue);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* Pricing table */
.table-scroll { overflow-x: auto; margin: 1.5rem 0; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .97rem;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
}

th, td {
  text-align: left;
  padding: .75rem .9rem;
  border-bottom: 1px solid rgba(199,172,138,.4);
}

th {
  font-family: var(--display);
  font-weight: 600;
  background: rgba(199,172,138,.18);
  white-space: nowrap;
}

td.price {
  font-family: var(--display);
  font-weight: 600;
  white-space: nowrap;
}

tr:last-child td { border-bottom: 0; }

/* ---------- Pricing cards ---------- */

.price-grid {
  display: grid;
  gap: 1.1rem;
  margin: 1.6rem 0;
}

@media (min-width: 34rem) {
  .price-grid--2 { grid-template-columns: 1fr 1fr; }
}

.price-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.35rem 1.4rem;
  box-shadow: 0 1px 2px rgba(64,51,39,.06), 0 8px 24px rgba(64,51,39,.06);
  border-top: 4px solid var(--kraft);
  position: relative;
}

.price-card--hero {
  border-top-color: transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--prism-gradient) border-box;
  border: 3px solid transparent;
}

.price-card__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.12rem;
  margin: 0 0 .15rem;
}

.price-card__who {
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 700;
  margin: 0 0 .8rem;
}

/* The big, friendly number — per week / per session */
.price-card__rate {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.35rem;
  line-height: 1;
  color: var(--river-blue);
  display: block;
}

.price-card__rate span {
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.price-card__total {
  font-size: .95rem;
  color: var(--ink-soft);
  margin: .5rem 0 0;
}

.price-card__note {
  font-size: .93rem;
  margin: .75rem 0 0;
}

.save-badge {
  display: inline-block;
  background: var(--p-green);
  color: #1d3a19;
  font-family: var(--display);
  font-weight: 700;
  font-size: .85rem;
  padding: .2rem .7rem;
  border-radius: 999px;
  margin-top: .6rem;
}

.save-badge--quiet {
  background: rgba(199,172,138,.35);
  color: var(--graphite);
}

/* ---------- Was / now / save comparison ---------- */

.compare {
  margin: 1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid rgba(199,172,138,.5);
}

.compare__line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .55rem .7rem;
  margin: 0;
}

/* The struck-through "if you bought singles" price */
.compare__was {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--sale);
  text-decoration: line-through;
  text-decoration-color: var(--sale);
  text-decoration-thickness: 2px;
}

.compare__now {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.45rem;
  color: var(--graphite);
  line-height: 1;
}

.compare__save {
  font-family: var(--display);
  font-weight: 700;
  font-size: .95rem;
  color: var(--sale);
  font-style: normal;
  border: 2px solid var(--sale);
  border-radius: 999px;
  padding: .1rem .65rem;
}

.compare__note {
  font-size: .87rem;
  color: var(--ink-soft);
  margin: .45rem 0 0;
}

/* Screen-reader-only: strikethrough + colour must not be the ONLY signal */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Breakdown list — used where sessions are NOT all the same price,
   so new clients never see a misleading averaged rate. */
.breakdown {
  list-style: none;
  padding: 0;
  margin: .3rem 0 .9rem;
}

.breakdown li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px dashed rgba(199,172,138,.55);
}

.breakdown li:last-child { border-bottom: 0; }

.breakdown span { font-size: .97rem; }

.breakdown strong {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--river-blue);
  white-space: nowrap;
}

/* The new-client explainer — the "two numbers" card */
.explainer {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.3rem;
  margin: 1.6rem 0;
  border: 3px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--prism-gradient) border-box;
}

.explainer h3 { margin-top: 0; }

.explainer__two {
  display: grid;
  gap: 1rem;
  margin: 1.2rem 0;
}

@media (min-width: 34rem) {
  .explainer__two { grid-template-columns: 1fr 1fr; }
}

.explainer__num {
  background: rgba(199,172,138,.16);
  border-radius: 10px;
  padding: .9rem 1rem;
}

.explainer__num p { margin: 0; }

.explainer__label {
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
}

.explainer__big {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1.15;
  color: var(--river-blue);
}

.explainer__after {
  font-size: .95rem;
  color: var(--ink-soft);
}

/* Simple two-column price line for singles */
.price-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid rgba(199,172,138,.4);
}

.price-line:last-child { border-bottom: 0; }
.price-line strong { font-family: var(--display); font-weight: 600; white-space: nowrap; }

/* Image slot — replace src when final art arrives */
figure {
  margin: 2rem 0;
}

figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}

figcaption {
  font-family: var(--hand);
  font-size: 1.15rem;
  color: var(--ink-soft);
  text-align: center;
  margin-top: .5rem;
}

ul.plain { padding-left: 1.15rem; }
ul.plain li { margin-bottom: .5rem; }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid rgba(199,172,138,.45);
  margin-top: 3rem;
  padding: 2rem 1.35rem 3rem;
  text-align: center;
  font-size: .92rem;
  color: var(--ink-soft);
}

.site-footer img { width: 54px; height: auto; opacity: .85; margin-bottom: .6rem; }
.site-footer a { color: var(--ink-soft); }

.legal {
  font-size: .8rem;
  line-height: 1.55;
  max-width: 34rem;
  margin: 1.2rem auto 0;
  color: var(--kraft);
}

/* ---------- Accessibility ---------- */

a:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--p-violet);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}