/* ==========================================================================
   My Little Internet — coming-soon teaser

   Tokens below were sampled from the approved design, not eyeballed:
   sage #E3EBDD · navy #1B1D37 · muted #50536C · coral #F76447 ·
   parchment #FBF4E6 · olive #7F9965. Locked — don't change without asking.

   Type: Lora 600/700 (+ italic) for display, Work Sans 400/600 for body & UI.
   Space Grotesk is retired — do not reintroduce it.
   ========================================================================== */

:root {
  /* --- Color (locked) --- */
  --sage: #E3EBDD;          /* hero, idea/final-CTA grounds */
  --white: #FFFFFF;         /* header, problem section, footer bar */
  --navy: #1B1D37;          /* headlines + primary text */
  --muted: #50536C;         /* body copy, captions */
  --coral: #F76447;         /* CTA + the coming-soon line */
  --coral-hover: #E4553A;
  --on-coral: #FDF9ED;      /* button label */
  --parchment: #FBF4E6;     /* quote card */
  --olive: #7F9965;         /* quote card left edge */
  --hairline: rgba(27, 29, 55, 0.10);

  /* --- Type --- */
  --font-display: Lora, Georgia, "Times New Roman", serif;
  --font-body: "Work Sans", ui-sans-serif, system-ui, sans-serif;

  /* Desktop targets match the approved design exactly:
     h1 60/66 (-1.5px) · h2 48/48 (-1.2px) · CTA h2 33.6/42 (-0.84px)
     body 18/29.25. They scale down from there. */
  --t-h1: clamp(2.25rem, 4.6vw, 3.75rem);
  --t-h2: clamp(1.875rem, 3.8vw, 3rem);
  --t-h2-cta: clamp(1.5rem, 2.6vw, 2.1rem);
  --t-body: clamp(1.0625rem, 1.3vw, 1.125rem);
  --t-lead: clamp(1.0625rem, 1.35vw, 1.1875rem);
  --t-ui: 0.875rem;
  --t-note: 1rem;
  --t-small: 0.875rem;

  /* --- Space --- */
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --section-y: clamp(3.5rem, 7vw, 6rem);

  --r-pill: 999px;
  --r-card: 26px;
  --r-media: 32px;

  --container: 1240px;
  --container-narrow: 820px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.625;
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 var(--s-6);
  text-wrap: balance;
}

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
  border-radius: 6px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 100;
  background: var(--navy);
  color: var(--white);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: var(--s-4); }

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

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-6);
}

.container.narrow { max-width: var(--container-narrow); }
.center { text-align: center; }

.section { padding-block: var(--section-y); }
.section--sage { background: var(--sage); }
.section--white { background: var(--white); }

.section__title {
  font-size: var(--t-h2);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.section__title--cta {
  font-size: var(--t-h2-cta);
  line-height: 1.25;
  letter-spacing: -0.025em;
  margin-top: var(--s-16);
}

.body {
  font-size: var(--t-body);
  line-height: 1.625;
  color: var(--muted);
  margin-bottom: var(--s-6);
}

.center .body { margin-inline: auto; max-width: 68ch; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--hairline);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding-block: var(--s-3);
}

.lockup { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.lockup img { height: 72px; width: auto; }

/* The coming-soon line is the only place coral appears as text. */
.header-note {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-note);
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--coral);
  text-align: center;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-ui);
  line-height: 1;
  min-height: 44px;
  padding: 0.75rem 1.4rem;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, transform 0.12s ease;
}

.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--coral); color: var(--on-coral); }
.btn--primary:hover { background: var(--coral-hover); }

.btn--sm { min-height: 42px; padding: 0.7rem 1.25rem; }
.btn--lg { min-height: 54px; padding: 1rem 1.9rem; font-size: 1rem; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.section--hero { padding-block: clamp(3rem, 6vw, 5.5rem); }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.hero__title {
  font-size: var(--t-h1);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: var(--s-8);
  /* Left-aligned hero fills each line greedily; balancing it strands a single
     word on line one. Centred headings below still balance. */
  text-wrap: normal;
}

.hero__lead {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--navy);
  margin-bottom: var(--s-2);
}

.hero__lead + .hero__lead { margin-bottom: 0; }

.hero__helper {
  font-size: var(--t-small);
  color: var(--muted);
  margin-top: var(--s-4);
  margin-bottom: var(--s-3);
}

.hero__trust { font-size: var(--t-small); color: var(--muted); margin: 0; }

.hero__media img {
  width: 100%;
  border-radius: var(--r-media);
  box-shadow: 0 18px 48px rgba(27, 29, 55, 0.14);
  object-fit: cover;
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  /* Photo below the copy on mobile, per the approved layout. */
  .hero__media { order: 2; }
}

/* --------------------------------------------------------------------------
   Signup form
   -------------------------------------------------------------------------- */

.signup {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-8);
  max-width: 560px;
}

.signup__input {
  flex: 1 1 210px;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--navy);
  background: var(--white);
  min-height: 52px;
  padding: 0.85rem 1.25rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  transition: border-color 0.15s ease;
}

.signup__input::placeholder { color: var(--muted); opacity: 0.75; }
.signup__input:focus { border-color: var(--navy); }
.signup.is-invalid .signup__input { border-color: var(--coral); border-width: 2px; }

.signup .btn { min-height: 52px; padding-inline: 1.6rem; font-size: 0.9375rem; }

/* Honeypot — removed from layout and from the a11y tree, never displayed. */
.trap {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.signup__message {
  flex: 1 0 100%;
  font-size: var(--t-small);
  font-weight: 600;
  margin: 0;
  min-height: 1.2rem;
}

.signup__message.is-error { color: var(--coral); }
.signup__message.is-success { color: var(--navy); }

/* --------------------------------------------------------------------------
   Quote carousel
   -------------------------------------------------------------------------- */

.carousel { margin-top: var(--s-12); }

/* Slides stack in one grid cell, so the card is always as tall as the longest
   quote and swapping slides never jumps the page. */
.carousel__viewport { display: grid; }

/* Every slide stays in the grid cell — that's what makes the card as tall as
   the longest quote and stops the page jumping between slides. Visibility
   (not display) hides the inactive ones, so they leave the tab order and the
   accessibility tree while still contributing their height. */
.quote {
  grid-area: 1 / 1;
  margin: 0;
  background: var(--parchment);
  border-left: 4px solid var(--olive);
  border-radius: var(--r-card);
  padding: 28px 32px;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

.quote.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease, visibility 0s;
}

.quote blockquote {
  margin: 0 0 var(--s-5);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.125rem, 1.9vw, 1.375rem);
  line-height: 1.65;
  color: var(--navy);
}

.quote figcaption {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-small);
  color: var(--muted);
}

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-8);
}

/* 44px hit area, 10px visible dot — tappable without looking heavy.
   flex-shrink is off so six of them never squash below the target size. */
.dot {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.dot::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(27, 29, 55, 0.22);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.dot:hover::before { background: rgba(27, 29, 55, 0.4); }
.dot[aria-selected="true"]::before { background: var(--coral); transform: scale(1.25); }

/* --------------------------------------------------------------------------
   Legal page (privacy)
   -------------------------------------------------------------------------- */

.legal__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 var(--s-3);
}

.legal__updated {
  font-size: var(--t-small);
  color: var(--muted);
  margin-bottom: var(--s-8);
}

.legal .body { max-width: 68ch; }
.legal .body strong { color: var(--navy); font-weight: 600; }

.legal a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal a:hover { color: var(--coral-hover); }

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

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
}

.footer-links a {
  display: inline-block;
  font-size: var(--t-small);
  color: var(--muted);
  text-decoration: none;
  /* Vertical padding buys a comfortable tap target without moving the row. */
  padding-block: 0.6rem;
}

.footer-links a:hover { color: var(--coral-hover); text-decoration: underline; }
.footer-links a[aria-current="page"] { color: var(--navy); font-weight: 600; }

/* --------------------------------------------------------------------------
   Success modal

   Uses the parchment of the quote card rather than white, so the confirmation
   reads as part of the same family as the rest of the page.
   -------------------------------------------------------------------------- */

.modal {
  margin: auto;                 /* centres in the top layer */
  padding: 0;
  border: 0;
  background: transparent;
  width: min(92vw, 480px);
  max-height: 90dvh;
  overflow: visible;
  color: var(--navy);
}

.modal::backdrop {
  background: rgba(27, 29, 55, 0.55);
}

.modal__card {
  position: relative;
  background: var(--parchment);
  border-radius: var(--r-card);
  padding: clamp(1.75rem, 5vw, 2.5rem);
  box-shadow: 0 24px 60px rgba(27, 29, 55, 0.28);
  /* Content scrolls inside the card, so a long message never pushes the modal
     off-screen or makes the page itself scroll. */
  max-height: 90dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: left;
}

.modal__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 var(--s-4);
  padding-right: 2.5rem;        /* clears the close button */
}

.modal__body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.625;
  color: var(--muted);
  margin: 0 0 var(--s-8);
}

.modal__confirm { width: 100%; }

.modal__close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.modal__close:hover { background: rgba(27, 29, 55, 0.07); color: var(--navy); }

.modal__close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* showModal() blocks interaction but not scrolling behind, so lock it here. */
body.has-modal { overflow: hidden; }

@media (min-width: 480px) {
  .modal__confirm { width: auto; min-width: 9rem; }
}

/* --------------------------------------------------------------------------
   Closing section + footer
   -------------------------------------------------------------------------- */

.section--close { padding-bottom: clamp(4rem, 8vw, 7rem); }

.site-footer { background: var(--white); padding-block: var(--s-8); }

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4) var(--s-6);
}

.lockup--footer img { height: 64px; }

.footer-tagline {
  margin: 0;
  font-size: var(--t-small);
  color: var(--muted);
  text-align: right;
}

@media (max-width: 860px) {
  .site-header__inner { flex-wrap: wrap; justify-content: center; row-gap: var(--s-3); }
  /* The coming-soon line drops to its own row rather than squeezing the logo. */
  .header-note { order: 3; flex: 1 0 100%; }
  .site-footer__inner { flex-direction: column; text-align: center; }
  .footer-tagline { text-align: center; }
}

@media (max-width: 520px) {
  .lockup img { height: 58px; }
  .header-note { font-size: 0.8125rem; }
  .quote { padding: 22px 22px; }
}

/* Six 44px dots plus gaps overflow a 320px screen, so tighten both a step —
   40px is still a comfortable target. */
@media (max-width: 400px) {
  .carousel__dots { gap: 0.25rem; }
  .dot { width: 40px; height: 40px; }
}