/* ---------------------------------------------------------------
   TextMeThe.News — shared styles
   --------------------------------------------------------------- */

:root {
  --brand: #5900ff;
  --brand-ink: #4400c4;
  --brand-wash: rgba(89, 0, 255, 0.10);
  --brand-glow: rgba(89, 0, 255, 0.22);

  --ink: #0d0a1a;
  --muted: #56516b;
  --bg: #fbfaff;
  --surface: #ffffff;
  --line: rgba(13, 10, 26, 0.10);

  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif;

  --pad: clamp(20px, 4vw, 56px);
  --max: calc(1400px + 2 * clamp(20px, 4vw, 56px));
}

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

html,
body {
  margin: 0;
  padding: 0;
}

/* The CTA's goo SVG deliberately overflows its button (see PAD in the inline
   script). Clip sideways so that overhang can't widen the scroll area on
   narrow screens; `clip` avoids creating a scroll container the way
   overflow-x: hidden would. */
html,
body {
  overflow-x: clip;
}

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
}

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

.site-header {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(16px, 2.5vh, 28px) var(--pad);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
  font-size: clamp(15px, 1.5vw, 18px);
  letter-spacing: -0.02em;
}

.wordmark img {
  width: auto;
  height: clamp(24px, 3vh, 32px);
  display: block;
}

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

.site-footer {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding: clamp(12px, 2vh, 24px) var(--pad);
  font-size: clamp(11px, 1.1vw, 13px);
  color: var(--muted);
}

.site-footer nav {
  display: flex;
  gap: 20px;
}

.site-footer a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.site-footer a:hover {
  color: var(--brand);
  border-bottom-color: var(--brand-wash);
}

/* --- Home layout (no scroll) ----------------------------------- */

body.home {
  height: 100dvh;
  overflow: hidden;
}

.shell {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100dvh;
}

.hero {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  /* Columns sized to their content, then centred as a pair. Fractional
     columns left a wide dead gutter between the copy (capped at 40ch) and
     the phone (centred in its own column). */
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  padding: 0 var(--pad);
  min-height: 0;
}

.hero-copy {
  max-width: 40ch;
}

.eyebrow {
  margin: 0 0 clamp(8px, 1.4vh, 14px);
  font-size: clamp(12px, 1.05vw, 14px);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}

h1 {
  margin: 0;
  /* Width-driven, but capped against viewport height too: the home page
     cannot scroll on desktop, so on a short window the headline has to give
     way or the fine print below it gets clipped. */
  font-size: clamp(2.2rem, min(6.3vw, 10vh), 5.5rem);
  line-height: 1;
  letter-spacing: -0.048em;
  font-weight: 800;
}

.lede {
  margin: clamp(10px, 1.8vh, 18px) 0 0;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  color: var(--muted);
  font-weight: 500;
  max-width: 34ch;
}

.lede strong {
  color: var(--ink);
  font-weight: 700;
}

.cta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(10px, 1.2vw, 16px);
  margin-top: clamp(14px, 2.4vh, 26px);
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: clamp(15px, 2vh, 21px) clamp(26px, 2.6vw, 38px);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  letter-spacing: -0.015em;
  isolation: isolate;
  border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
  /* No-JS / pre-JS fallback: a plain pill. Swapped for the SVG goo below. */
  background: var(--brand);
  /* Static, pill-shaped, never repainted by the animation. It sits in the
     element's own background layer, so the negative-z SVG paints over it. */
  box-shadow: 0 12px 28px 2px rgba(89, 0, 255, 0.26);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
  background: #6a1aff;
}

.btn.has-goo {
  background: transparent;   /* the SVG draws the pill; the shadow stays */
}

.btn.has-goo:hover {
  box-shadow: 0 14px 32px 3px rgba(89, 0, 255, 0.32);
}

/* The pill, the pointer-tracking blob, and the satellite blobs are all
   drawn inside this SVG and merged by its goo filter (blur + alpha
   threshold). Running the filter on SVG content, not via CSS filter:url()
   on an HTML box, is what makes it render reliably in Safari as well as
   Chrome. The label is real HTML text layered above it. */
.btn-goo {
  position: absolute;
  /* Placeholder; layout() in the inline script overwrites both from PAD. */
  top: -110px;
  left: -110px;
  z-index: -1;
  display: none;
  overflow: visible;
  pointer-events: none;
}

.btn.has-goo .btn-goo {
  display: block;
}

.goo-shapes,
.goo-pill-crisp {
  fill: var(--brand);
  transition: fill 0.2s ease;
}

.btn:hover .goo-shapes,
.btn:hover .goo-pill-crisp {
  fill: #6a1aff;
}

.btn-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.btn:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 4px;
}

.btn .arrow {
  transition: transform 0.15s ease;
}

.btn:hover .arrow {
  transform: translateX(3px);
}

.cta-alt {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--muted);
  font-weight: 500;
  line-height: 1.45;
  max-width: 30ch;
}

.cta-alt strong {
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
}

.cta-optional {
  margin: clamp(8px, 1.2vh, 13px) 0 0;
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  line-height: 1.5;
  color: var(--muted);
  font-weight: 500;
}

.cta-optional a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.compliance {
  margin: clamp(10px, 1.6vh, 16px) 0 0;
  font-size: clamp(9.5px, 0.88vw, 11px);
  line-height: 1.6;
  color: var(--muted);
  opacity: 0.85;
}

.compliance a {
  color: inherit;
  text-underline-offset: 2px;
}

/* --- Phone ------------------------------------------------------ */

.hero-visual {
  position: relative;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.hero-visual::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 78%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    var(--brand-glow) 0%,
    rgba(89, 0, 255, 0) 68%
  );
  z-index: 0;
  pointer-events: none;
}

.phone {
  position: relative;
  z-index: 1;
  height: 100%;
  /* Leaves room for the caption underneath. */
  max-height: calc(100% - 22px);
  aspect-ratio: 900 / 1840;
}

.phone-note {
  margin: 0;
  font-size: 11px;
  line-height: 1.3;
  color: var(--muted);
  opacity: 0.7;
  text-align: center;
}

.phone > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* --- Legal pages ------------------------------------------------ */

.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(24px, 5vh, 56px) var(--pad) clamp(48px, 8vh, 96px);
}

.legal .back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-bottom: clamp(20px, 4vh, 36px);
}

.legal .back:hover {
  text-decoration-thickness: 2px;
}

.legal h1 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  letter-spacing: -0.04em;
  margin-bottom: 8px;
}

.legal .updated {
  margin: 0 0 clamp(24px, 4vh, 40px);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

.legal h2 {
  margin: clamp(28px, 4.5vh, 44px) 0 10px;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.legal h3 {
  margin: 22px 0 6px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.legal p,
.legal li {
  font-size: clamp(0.95rem, 1.2vw, 1.02rem);
  line-height: 1.68;
  color: #2c2840;
  font-weight: 400;
}

.legal ul {
  padding-left: 1.15em;
  margin: 10px 0;
}

.legal li {
  margin-bottom: 8px;
}

.legal li::marker {
  color: var(--brand);
}

.legal a {
  color: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal strong {
  font-weight: 800;
}

.legal-footer {
  border-top: 1px solid var(--line);
  margin-top: 8px;
}

.legal-footer a {
  color: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  border-bottom: 0;
}

.legal-footer a:hover {
  color: inherit;
  text-decoration-thickness: 2px;
}

/* --- Responsive -------------------------------------------------- */

@media (max-width: 900px) {
  /* Stop cramming everything into one viewport. Below this width the page
     scrolls and the type is sized for a phone rather than shrunk to fit. */
  body.home {
    height: auto;
    overflow: visible;
  }

  .shell {
    height: auto;
    min-height: 100dvh;
  }

  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-items: stretch;
    gap: clamp(28px, 5vh, 48px);
    padding-top: clamp(20px, 4vh, 40px);
  }

  .hero-copy {
    max-width: none;
    text-align: center;
    margin: 0 auto;
    align-self: start;
  }

  .eyebrow {
    font-size: 13px;
    margin-bottom: clamp(14px, 2.4vh, 20px);
  }

  h1 {
    font-size: clamp(2.4rem, 9.5vw, 3.4rem);
  }

  .lede {
    font-size: clamp(1.1rem, 4.4vw, 1.35rem);
    max-width: 26ch;
  }

  .cta-alt {
    font-size: clamp(1.05rem, 4.2vw, 1.25rem);
    max-width: 26ch;
  }

  .cta-optional {
    font-size: clamp(0.95rem, 3.8vw, 1.1rem);
    max-width: 34ch;
  }

  .compliance {
    font-size: 12px;
    max-width: 44ch;
  }

  /* Everything in the copy column is centred on mobile, so each capped
     block needs auto side margins or it sits flush left. */
  .lede,
  .cta-alt,
  .cta-optional,
  .compliance {
    margin-left: auto;
    margin-right: auto;
  }

  .cta-row {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: clamp(24px, 4vh, 36px);
  }

  .cta-alt {
    text-align: center;
  }

  .btn {
    font-size: 1.15rem;
    padding: 19px 34px;
  }

  .hero-visual {
    height: auto;
    min-height: 0;
    justify-content: flex-start;
    gap: 12px;
  }

  /* Width-driven now that the row is no longer a fixed 1fr. */
  .phone {
    height: auto;
    width: min(76vw, 380px);
    max-height: none;
  }

  .site-footer {
    justify-content: center;
    text-align: center;
    padding-top: clamp(20px, 4vh, 32px);
  }
}

/* Short desktop windows (laptops at 1512x760, 1280x700). The home page does
   not scroll here, so the copy column has to fit the row or the fine print
   below it is silently clipped by the shell's overflow: hidden. */
@media (min-width: 901px) and (max-height: 820px) {
  h1 {
    font-size: min(6.3vw, 9vh);
  }

  .eyebrow {
    margin-bottom: 8px;
  }

  .lede {
    margin-top: 10px;
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  }

  .cta-row {
    margin-top: 12px;
    gap: 10px;
  }

  .btn {
    padding: 13px 28px;
    font-size: 1rem;
  }

  .cta-optional {
    margin-top: 8px;
    font-size: 0.9rem;
  }

  .compliance {
    margin-top: 10px;
    line-height: 1.5;
  }
}

/* Short viewports: tighten spacing before anything gets cut. */
@media (max-height: 560px) {
  .cta-optional {
  margin: clamp(8px, 1.2vh, 13px) 0 0;
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  line-height: 1.5;
  color: var(--muted);
  font-weight: 500;
}

.cta-optional a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.compliance {
    margin-top: 10px;
  }
}

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