/* ==========================================================================
   Resurface — landing page
   Mobile-first. Breakpoints: 768px (tablet), 1024px (desktop / full design).
   ========================================================================== */

:root {
  --cream: #F7F4EE;
  --card: #FFFDF9;
  --teal: #1E4B50;
  --teal-hover: #173A3E;
  --ink: #191714;

  --ink-75: rgba(25, 23, 20, .75);
  --ink-62: rgba(25, 23, 20, .62);
  --ink-60: rgba(25, 23, 20, .60);
  --ink-55: rgba(25, 23, 20, .55);
  --ink-45: rgba(25, 23, 20, .45);
  --ink-40: rgba(25, 23, 20, .40);
  --ink-38: rgba(25, 23, 20, .38);
  --ink-35: rgba(25, 23, 20, .35);
  --ink-20: rgba(25, 23, 20, .20);
  --ink-15: rgba(25, 23, 20, .15);
  --ink-12: rgba(25, 23, 20, .12);
  --ink-08: rgba(25, 23, 20, .08);
  --ink-06: rgba(25, 23, 20, .06);
  --ink-05: rgba(25, 23, 20, .05);

  --teal-70: rgba(30, 75, 80, .7);
  --teal-60: rgba(30, 75, 80, .6);
  --teal-55: rgba(30, 75, 80, .55);

  --rule: 1px solid var(--ink-08);
  --shadow-card: 0 20px 50px rgba(40, 30, 20, .1), 0 0 0 1px var(--ink-06);
  --shadow-soft: 0 8px 24px rgba(40, 30, 20, .07);
  --shadow-feature: 0 12px 32px rgba(40, 30, 20, .06), 0 0 0 1px var(--ink-06);

  --serif: Newsreader, Georgia, serif;
  --serif-display: 'Instrument Serif', Georgia, serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, sans-serif;

  --stone: #DFD8CC;
  --home-gradient: radial-gradient(120% 90% at 20% 8%, #DCE5E3 0%, #E8E2D8 45%, #D6CCC0 100%);
}

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

html { scroll-behavior: smooth; }

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

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-hover); }

::selection { background: rgba(30, 75, 80, .16); }
input::placeholder { color: var(--ink-40); }

img, svg { max-width: 100%; }

blockquote { margin: 0; }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  padding: 10px 18px;
  border-radius: 100px;
  background: var(--teal);
  color: var(--cream);
  font: 500 13px/1 var(--sans);
  z-index: 10;
}
.skip-link:focus {
  left: 16px;
  color: var(--cream);
}

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

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 48px 0 64px;
  border-top: var(--rule);
}

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
.split--start { align-items: start; }

/* --------------------------------------------------------------------------
   Shared type
   -------------------------------------------------------------------------- */

.eyebrow {
  margin: 0 0 12px;
  font: 500 11px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal-70);
}

.section-title {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: -.015em;
  text-wrap: pretty;
}
.section-title--spaced { margin-bottom: 40px; }

.section-body {
  margin: 0 0 32px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-60);
}
.section-body--narrow { max-width: 420px; margin-bottom: 0; }

.micro-label {
  margin: 0 0 12px;
  font: 500 9px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-38);
}

.emoji { font-size: 14px; line-height: 1; }
.emoji-lg { font-size: 17px; line-height: 1; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border: 0;
  border-radius: 100px;
  background: var(--teal);
  color: var(--cream);
  font: 500 14px/1 var(--sans);
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s ease, transform .18s ease;
}
.btn:hover { background: var(--teal-hover); }
.btn:active { transform: translateY(1px); }

.btn-sm { padding: 11px 20px; font-size: 13px; }
.btn-notify { padding: 14px 24px; font-size: 13.5px; }

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

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
}
.wordmark:hover { color: inherit; }

.wordmark-text {
  font-family: var(--serif-display);
  font-size: 22px;
  letter-spacing: -.01em;
}

.mark { flex: none; display: block; }

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

.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
  padding: 32px 0 56px;
}

.hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: pretty;
}

.hero .eyebrow { margin-bottom: 18px; }

.lede {
  margin: 22px 0 0;
  max-width: 460px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-62);
}

.hero-actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.hero-steps { font-size: 13px; color: var(--ink-40); }

.hero-art {
  position: relative;
  display: flex;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Takeaway cards
   -------------------------------------------------------------------------- */

.takeaway-card {
  margin: 0;
  background: var(--card);
  border-radius: 22px;
  padding: 26px 26px 22px;
  box-shadow: var(--shadow-card);
}

.takeaway-card--hero {
  width: 100%;
  max-width: 340px;
  transform: rotate(-1.5deg);
}

.takeaway-card--feature {
  border-radius: 20px;
  padding: 28px;
  box-shadow: var(--shadow-feature);
}

.takeaway-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.star { font-size: 12px; color: var(--ink-20); }
.star--on { color: var(--teal); }

.takeaway-quote {
  margin: 14px 0 0;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 23px;
  line-height: 1.35;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.takeaway-quote--sm { font-size: 22px; line-height: 1.36; }

.takeaway-meta {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.category {
  font: 500 9px/1 var(--sans);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--teal-60);
}
.category--foot { margin-top: auto; }

.dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink-20);
}

.date { font: 400 10.5px/1 var(--sans); color: var(--ink-38); }

.takeaway-source {
  margin-top: 22px;
  padding-top: 18px;
  border-top: var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.source-name { font-size: 12.5px; color: var(--ink-40); }
.source-link { font: 500 11px/1 var(--sans); color: var(--teal); }

/* Concentric ripple marks */
.ripple { position: absolute; }
.ripple--hero { right: -6px; bottom: 14px; overflow: visible; }
.ripple--tile { right: -4px; bottom: -4px; }
.ripple--widget { right: -6px; bottom: -6px; }

/* --------------------------------------------------------------------------
   How it works
   -------------------------------------------------------------------------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}

/* Stacked on phones, one step reads straight into the next. A dot — the same
   3px mark used in the card meta rows — plus room around it keeps them apart.
   Removed once the steps sit side by side and the columns do that job. */
.step + .step::before {
  content: "";
  display: block;
  width: 3px;
  height: 3px;
  margin: 0 auto 36px;
  border-radius: 50%;
  background: var(--ink-20);
}

.step-visual {
  height: 220px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.step-visual--film {
  background: var(--stone);
  position: relative;
}
.film-hatch { position: absolute; inset: 0; }
.film-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.play { font-size: 26px; }

.step-visual--card {
  background: var(--card);
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.mini-quote {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 16px;
  line-height: 1.35;
}
.mini-quote--sm { font-size: 14px; line-height: 1.3; margin-top: 10px; }

.step-visual--library {
  background: var(--card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.library-list {
  flex: 1;
  border-top: var(--rule);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.library-item {
  margin: 0;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink-75);
}

.step-visual--widget {
  background: var(--home-gradient);
  padding: 18px;
  display: flex;
}
.widget-tile {
  width: 100%;
  border-radius: 16px;
  background: var(--cream);
  padding: 16px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.step-label {
  margin: 18px 0 0;
  font: 600 13px/1 var(--sans);
}
.step-body {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-55);
}

/* --------------------------------------------------------------------------
   Chips & priority
   -------------------------------------------------------------------------- */

.chip-row { display: flex; gap: 8px; }
.chip-row--wrap { flex-wrap: wrap; margin-bottom: 28px; }

.chip {
  font: 500 11.5px/1 var(--sans);
  padding: 8px 14px;
  border-radius: 100px;
  background: var(--ink-05);
  color: var(--ink-55);
}
.chip--active { background: var(--teal); color: var(--cream); }

.chip--sm { font-size: 9px; padding: 5px 9px; }
.chip--sm:not(.chip--active) { background: var(--ink-06); color: rgba(25, 23, 20, .5); }

.priority {
  display: flex;
  gap: 8px;
  max-width: 280px;
}
.priority-option {
  flex: 1;
  text-align: center;
  padding: 11px 0;
  border-radius: 11px;
  border: 1px solid var(--ink-12);
  font: 500 12px/1 var(--sans);
  color: var(--ink-45);
}
.priority-option--active {
  border: 1.5px solid rgba(30, 75, 80, .45);
  background: rgba(30, 75, 80, .09);
  color: var(--teal);
}

/* --------------------------------------------------------------------------
   Widget section
   -------------------------------------------------------------------------- */

.section--widget { padding: 56px 0; }

.home-screen-wrap { display: flex; justify-content: center; }

.home-screen {
  width: 280px;
  border-radius: 32px;
  background: var(--home-gradient);
  padding: 24px;
  box-shadow: 0 20px 50px rgba(40, 30, 20, .1);
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.app-grid:first-child { margin-bottom: 18px; }
.app-grid:last-child { margin-top: 18px; }

.app-icon {
  aspect-ratio: 1;
  border-radius: 14px;
  background: rgba(255, 255, 255, .34);
}

.widget-card {
  position: relative;
  border-radius: 22px;
  background: var(--cream);
  padding: 18px;
  box-shadow: 0 10px 24px rgba(40, 30, 20, .15);
}
.widget-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.widget-card .emoji { font-size: 15px; }
.widget-tag {
  font: 500 8.5px/1 var(--sans);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--teal-55);
}
.widget-quote {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -.01em;
}

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

.section--cta {
  padding: 64px 0;
  text-align: center;
}

.cta-title {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -.015em;
  text-wrap: pretty;
}

.cta-sub {
  margin: 0 0 32px;
  font-size: 15.5px;
  color: var(--ink-55);
}

.notify-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 420px;
  margin: 0 auto;
}

.notify-input {
  flex: 1 1 220px;
  min-width: 0;
  height: 48px;
  border-radius: 100px;
  border: 1px solid var(--ink-15);
  background: var(--card);
  padding: 0 20px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink);
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.notify-input:focus {
  border-color: rgba(30, 75, 80, .45);
  box-shadow: 0 0 0 3px rgba(30, 75, 80, .1);
}
.notify-input[aria-invalid="true"] { border-color: rgba(160, 60, 40, .5); }

.notify-status {
  min-height: 20px;
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--teal);
}
.notify-status[data-state="error"] { color: rgba(150, 60, 40, .9); }

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

.site-footer {
  padding: 32px 0 40px;
  border-top: var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.footer-brand { display: flex; align-items: center; gap: 9px; }
.footer-text { font-size: 12.5px; color: var(--ink-45); }
.footer-copy { font-size: 12px; color: var(--ink-35); }

/* --------------------------------------------------------------------------
   Tablet — 768px and up
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .container { padding: 0 32px; }

  .nav { padding: 28px 0; }

  .section { padding: 56px 0 80px; }
  .section--widget { padding: 72px 0; }
  .section--cta { padding: 80px 0; }

  .hero { padding: 48px 0 80px; }
  .hero h1 { font-size: 46px; }
  .lede { margin-top: 24px; }

  .section-title { font-size: 30px; }
  .section-title--spaced { margin-bottom: 48px; }
  .cta-title { font-size: 34px; }

  /* 4 col → 2 col */
  /* Two rows here, so the row gap needs to be bigger than the column gap —
     otherwise row 2's cards crowd row 1's copy. */
  .steps { grid-template-columns: repeat(2, 1fr); gap: 48px 28px; }
  .step + .step::before { display: none; }
}

/* --------------------------------------------------------------------------
   Desktop — 1024px and up (full design)
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .container { padding: 0 48px; }

  .nav { padding: 32px 0; }

  .section { padding: 64px 0 96px; }
  .section--widget { padding: 80px 0; }
  .section--cta { padding: 96px 0; }

  .hero {
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    padding: 64px 0 96px;
  }
  .hero h1 { font-size: 56px; }
  .lede { margin-top: 26px; }

  .section-title { font-size: 34px; }
  .section-title--spaced { margin-bottom: 56px; }
  .cta-title { font-size: 38px; }

  .split { grid-template-columns: 1fr 1fr; gap: 64px; }

  /* Single row again — back to the comp's even 28px. */
  .steps { grid-template-columns: repeat(4, 1fr); gap: 28px; }
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

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