/* ==========================================================================
   Text Sales Letter — design system
   Mirrors the reference: Noto Serif headlines / Noto Sans body, 20px root,
   770px measure, #DF3129 CTA, rgb(184,0,14) accent, cream highlight.
   ========================================================================== */

:root {
  color-scheme: light;

  --font-headline: "Noto Serif", Georgia, "Times New Roman", serif;
  --font-body: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --c-black: rgb(0, 0, 0);
  --c-ink: rgb(56, 57, 59);
  --c-muted: rgb(96, 96, 107);
  --c-line: rgb(168, 168, 168);
  --c-hairline: #ebebeb;
  --c-white: rgb(255, 255, 255);
  --c-offwhite: rgb(252, 252, 252);
  --c-accent: rgb(184, 0, 14);
  --c-red: rgb(255, 0, 0);
  --c-cream: rgb(255, 249, 240);

  --c-btn: #df3129;
  --c-btn-border: #bd3129;
  --c-btn-hover: #f03129;
  --c-btn-active: #9c1c17;

  /* Letter type scale. Bumped one step above the reference for readability —
     change these three to resize the whole letter consistently. */
  --size-headline: 2rem;
  --size-subheadline: 1.65rem;
  --size-copy: 1.4rem;

  /* Leading for the letter. TSL copy is written one sentence per line, so this
     is what sets the air between those lines. */
  --leading-copy: 1.9;
  --leading-headline: 1.4;

  /* Gap between paragraphs — i.e. between the one-sentence lines of the letter. */
  --gap-copy: 24px;

  --c-mark: #fff268;

  --measure: 770px;
  --radius: 4px;
  --input-border: 1px solid rgba(0, 0, 0, 0.2);
}

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

html { font-size: 20px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-black);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.5;
}

img { max-width: 100%; height: auto; }

/* ------------------------------------------------------------- structure */

.tsl-shell { width: 100%; }

.tsl-container {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 20px;
}

.tsl-section { padding: 10px 0; }
.tsl-section--flush { padding: 0; }

/* Utility band backgrounds mirroring the reference's paint-colors */
.band-lightest { background: var(--c-white); }
.band-light    { background: var(--c-cream); }
.band-dark     { background: var(--c-ink); color: var(--c-white); }
.band-darkest  { background: var(--c-black); color: var(--c-white); }
.band-colored  { background: var(--c-accent); color: var(--c-white); }

/* ------------------------------------------------------------ typography */

.tsl-headline {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--size-headline);
  line-height: var(--leading-headline);
  color: var(--c-black);
  margin: 0 0 16px;
  text-align: left;
}

.tsl-subheadline {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: var(--size-subheadline);
  line-height: var(--leading-headline);
  color: var(--c-black);
  margin: 34px 0 16px;
  text-align: left;
}

/* Subheadlines carry their own weight — **bold** inside the markdown must not
   add another. Colour still applies so emphasis reads on the accent lines. */
.tsl-subheadline b,
.tsl-subheadline strong { font-weight: inherit; }

.tsl-subheadline--accent { color: var(--c-accent); }
.tsl-subheadline--accent b,
.tsl-subheadline--accent strong { color: var(--c-red); }
.tsl-subheadline--small { font-size: 1.45rem; }

.tsl-copy {
  font-family: var(--font-body);
  font-size: var(--size-copy);
  line-height: var(--leading-copy);
  color: var(--c-black);
  margin: 0 0 var(--gap-copy);
  text-align: left;
}

.tsl-copy a, .tsl-callout a { color: var(--c-accent); }
.tsl-copy b, .tsl-copy strong { font-weight: 700; }
.tsl-copy s, .tsl-copy strike { opacity: 0.8; }

.tsl-list {
  font-size: var(--size-copy);
  line-height: var(--leading-copy);
  margin: 0 0 var(--gap-copy);
  padding-left: 1.2em;
}
.tsl-list li { margin-bottom: 12px; }

.tsl-figure { margin: 22px 0; text-align: center; }
.tsl-image {
  display: block;
  width: 100%;
  margin-inline: auto;
  border-radius: var(--radius);
}

/* ==highlight== from the Obsidian copy */
.tsl-mark {
  background: var(--c-mark);
  color: inherit;
  padding: 0.05em 0.12em;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.tsl-mark strong, .tsl-mark b { font-weight: 700; }

.tsl-divider {
  border: 0;
  border-top: 1px solid var(--c-hairline);
  margin: 28px 0;
}

.tsl-callout {
  background: var(--c-cream);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 0 0 20px;
}
.tsl-callout > :last-child { margin-bottom: 0; }
.tsl-callout { line-height: var(--leading-copy); }

/* ------------------------------------------------------------------- CTA */

.tsl-cta { margin: 26px 0 32px; text-align: center; }

.tsl-cta__price {
  font-family: var(--font-body);
  font-size: 1.25rem;
  margin: 0 0 8px;
  color: var(--c-black);
}
.tsl-cta__price s, .tsl-cta__price strike { font-style: italic; }
.tsl-cta__price b { font-weight: 700; }

.tsl-button {
  display: inline-block;
  background: var(--c-btn);
  border: 1px solid var(--c-btn-border);
  border-radius: var(--radius);
  color: var(--c-white);
  text-decoration: none;
  padding: 18px 40px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.tsl-button:hover { background: var(--c-btn-hover); border-color: #cd3129; }
.tsl-button:active { background: var(--c-btn-active); border-color: var(--c-btn-active); }
.tsl-button:disabled, .tsl-button[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }

.tsl-button__text {
  display: block;
  color: var(--c-white);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 100%;
}

.tsl-button--block { display: block; width: 100%; text-align: center; }

/* ---------------------------------------------------------------- header */

.tsl-topbar {
  background: var(--c-offwhite);
  border-bottom: 1px solid var(--c-hairline);
  padding: 12px 0;
  text-align: center;
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.6;
}
.tsl-topbar a { color: var(--c-muted); text-decoration: none; }
.tsl-topbar strong { color: var(--c-ink); }

/* ---------------------------------------------------------------- footer */

.tsl-footer {
  border-top: 1px solid var(--c-hairline);
  margin-top: 40px;
  padding: 28px 0 44px;
  text-align: center;
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.7;
}
.tsl-footer a { color: var(--c-muted); }
.tsl-footer__links { margin-top: 8px; }
.tsl-footer__links a { margin: 0 6px; }

/* ------------------------------------------------------- mobile tweaks */

/* Mobile is the primary target (paid social traffic). Type runs ~5px smaller
   than desktop, with extra leading and paragraph gap so the one-sentence-per-
   line copy breathes on a narrow screen. */
@media (max-width: 770px) {
  :root {
    --size-headline: 1.6rem;     /* 32px */
    --size-subheadline: 1.3rem;  /* 26px */
    --size-copy: 1.1rem;         /* 22px */

    --leading-copy: 2;
    --gap-copy: 36px;
  }
  .tsl-subheadline { margin: 44px 0 26px; }
  .tsl-figure { margin: 32px 0; }
  .tsl-subheadline--small { font-size: 1.2rem; }
  .tsl-cta__price { font-size: 1rem; }
  .tsl-button__text { font-size: 1.25rem; }
  .tsl-topbar, .tsl-footer { font-size: 0.75rem; }
  .tsl-button { padding: 16px 24px; width: 100%; }
  .tsl-container { padding: 0 16px; }
}