/* Landing page styles — adapted from the CEO's marketing mock
   (gifted_marketing_landing_gifted_headline.html). Loaded only by the
   `landing` layout, so selectors are page-global on purpose.

   Type intentionally uses system fonts only (Georgia serif for display,
   the platform sans stack for body) — zero external font requests, which
   also keeps the page inside the CSP's font-src 'self' policy. */

:root {
  --bg: #080b1a;
  --bg-2: #0b1022;
  --panel: #10172b;
  --panel-2: #141d33;
  --cream: #fff7ee;
  --cream-2: #f4eadf;
  --ink: #111827;
  --muted: #aeb8cc;
  --muted-2: #7f8ba3;
  --orange: #ff9638;
  --gold: #ffc45a;
  --pink: #e84bc6;
  --coral: #ff6f66;
  --line: rgba(255, 255, 255, .10);
  --line-orange: rgba(255, 150, 56, .34);
  --shadow: 0 30px 90px rgba(0, 0, 0, .35);
  --radius: 30px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  color: var(--cream);
  /* No `Inter` here on purpose: this page never loads the webfont (see the
     header comment), so naming it would render a different face only for
     visitors who happen to have Inter installed locally. */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 150, 56, .10), transparent 24%),
    radial-gradient(circle at 84% 6%, rgba(38, 66, 116, .22), transparent 30%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

a { color: inherit; text-decoration: none; }

/* Flash messages (Devise sign-out notices, OAuth failure alerts). The shared
   partial is inline-styled; this only reserves comfortable spacing. The
   layout renders the wrapper only when a flash is present, so no empty
   spacer ever shifts the header. */
.flash-wrap { padding: 16px 24px 0; }

.nav {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 900;
  letter-spacing: -0.035em;
  font-size: 24px;
}

/* The shared logo PNG is a rounded-square mark on a transparent background
   that nearly fills its frame, so it is cover-fitted and clipped by the
   container radius — matching how .brand-mark-img renders it app-wide. */
.brand-logo {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 26%;
  filter: drop-shadow(0 12px 28px rgba(255, 130, 56, .22));
}

.navlinks {
  display: flex;
  gap: 30px;
  color: #c0c8d9;
  font-size: 14px;
  font-weight: 750;
}

.nav-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.btn {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .045);
  color: var(--cream);
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  white-space: nowrap;
}

.btn.primary {
  color: #1b1115;
  background: linear-gradient(135deg, var(--gold), #ff7b45 48%, var(--pink));
  border: 0;
  box-shadow: 0 18px 44px rgba(255, 126, 62, .24);
}

/* Keyboard focus (WCAG 2.4.7): a deliberate high-contrast ring on every
   interactive element instead of the browser default, which is nearly
   invisible on the navy background. Gold measures ~12:1 against the dark
   sections; the cream panels get a darker ring below. */
.brand:focus-visible,
.btn:focus-visible,
.navlinks a:focus-visible,
.site-footer a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 6px;
}

.btn:focus-visible { border-radius: 999px; }

/* Gold reads ~1.4:1 on the cream panels, so links/CTAs inside them use this
   darker ring (~6.4:1 on #fff3e4) instead. Declared after the gold rule so
   the equal-specificity cascade resolves in its favor. */
.light-panel :focus-visible,
.light-panel-final :focus-visible {
  outline-color: #8d4517;
}

.hero {
  max-width: 1180px;
  margin: 0 auto;
  padding: 58px 24px 92px;
  display: grid;
  /* Right column min matches the 430px .gift-stack: if it were allowed to
     shrink below that, the absolutely-positioned note card would slide over
     the secondary card's text at ~1024px viewports. */
  grid-template-columns: minmax(0, .98fr) minmax(430px, .78fr);
  gap: 54px;
  align-items: center;
}

.eyebrow {
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: .34em;
  font-size: 12px;
  font-weight: 950;
  margin-bottom: 20px;
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(54px, 6vw, 82px);
  line-height: .96;
  letter-spacing: -.058em;
  margin-bottom: 24px;
  max-width: 720px;
  color: var(--cream);
}

.accent {
  font-style: italic;
  background: linear-gradient(135deg, var(--gold), var(--orange), var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-copy {
  color: #cbd3e4;
  font-size: 20px;
  line-height: 1.55;
  max-width: 625px;
  margin-bottom: 0;
}

.hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.trust-row {
  display: flex;
  gap: 14px;
  margin-top: 28px;
  color: #aeb8cc;
  font-size: 14px;
  flex-wrap: wrap;
}

.trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .035);
  border-radius: 999px;
}

.hero-art {
  position: relative;
  min-height: 520px;
  display: grid;
  place-items: center;
}

.glow {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 44% 40%, rgba(255, 190, 82, .92), rgba(255, 118, 70, .70) 38%, rgba(232, 75, 198, .38) 60%, rgba(31, 52, 96, .20) 78%, transparent 79%);
  opacity: .88;
  filter: blur(2px);
}

/* Scattered-polaroid stack. The three cards are absolutely positioned and
   staggered vertically (main on top, note + secondary side by side below) so
   that rotated corners may brush a neighbour's empty margin but never cover
   another card's text. Heights/widths below are sized to keep that true. */
.gift-stack {
  position: relative;
  width: min(430px, 100%);
  height: 660px;
}

.gift-card {
  position: absolute;
  border-radius: 28px;
  background: var(--cream);
  color: #1e2535;
  box-shadow: 0 28px 75px rgba(0, 0, 0, .30);
  border: 1px solid rgba(255, 255, 255, .7);
  padding: 24px;
}

.gift-card.main {
  width: 350px;
  top: 0;
  left: 34px;
  transform: rotate(-2.5deg);
}

.gift-card.secondary {
  width: 250px;
  right: 0;
  bottom: 12px;
  transform: rotate(3deg);
  background: #fffaf4;
}

.gift-card.note {
  width: 198px;
  left: 0;
  bottom: 34px;
  transform: rotate(-5deg);
  background: #10172b;
  color: var(--cream);
  border: 1px solid var(--line-orange);
}

.date-pill {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  background: #fff0df;
  color: #8d4517;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 18px;
}

.gift-card h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  letter-spacing: -.055em;
  line-height: 1;
  margin-bottom: 12px;
}

.gift-card p {
  color: #677083;
  margin-bottom: 0;
  font-size: 15px;
}

.mini-list {
  margin-top: 20px;
  display: grid;
  gap: 10px;
}

.mini-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  background: #f5ecde;
  border-radius: 16px;
  padding: 12px 13px;
  font-size: 14px;
  color: #333b4d;
  font-weight: 760;
}

.mini-item span:last-child { color: #9a5a1b; }

.note h4 {
  margin: 0 0 12px;
  font-size: 13px;
  color: #ffbd69;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.note p {
  color: #d6deed;
  font-size: 16px;
  line-height: 1.45;
}

.section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 78px 24px;
  color: #172033;
}

.section.dark {
  color: var(--cream);
  padding-top: 86px;
  padding-bottom: 86px;
}

.section.intro-dark {
  color: var(--cream);
  padding-top: 72px;
  padding-bottom: 90px;
}

.section.intro-dark .section-head p {
  color: #aeb8cc;
}

.section.intro-dark .problem {
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025));
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: none;
}

.section.intro-dark .problem h3 {
  color: var(--cream);
}

.section.intro-dark .problem p {
  color: #aeb8cc;
}

.section.intro-dark .problem .icon {
  background: rgba(255, 150, 56, .12);
  border: 1px solid rgba(255, 150, 56, .20);
}

.section-head {
  max-width: 770px;
  margin-bottom: 38px;
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 5vw, 66px);
  line-height: .98;
  letter-spacing: -.058em;
  margin-bottom: 0;
}

.section-head p {
  color: #687184;
  font-size: 18px;
  margin: 18px 0 0;
}

.light-panel {
  background: #fff3e4;
  max-width: none;
  margin: 0;
  padding-left: max(24px, calc((100vw - 1180px) / 2 + 24px));
  padding-right: max(24px, calc((100vw - 1180px) / 2 + 24px));
}

.light-panel > * {
  max-width: 1180px;
}

/* Compound selector on purpose: the element is `.final.light-panel-final`,
   and `.final` (declared later) would otherwise win the equal-specificity
   cascade and clobber max-width + the gutter paddings — leaving the closing
   CTA band inset on wide viewports instead of full-bleed like the sibling
   .light-panel above it. (The mock had this latent bug too.) */
.final.light-panel-final {
  background: #fff3e4;
  max-width: none;
  padding-left: max(24px, calc((100vw - 1180px) / 2 + 24px));
  padding-right: max(24px, calc((100vw - 1180px) / 2 + 24px));
}

.light-panel-final .final-card {
  max-width: 1180px;
  margin: 0 auto;
}

.dark .section-head p { color: #aeb8cc; }

.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.problem {
  border-radius: 26px;
  background: #fffaf2;
  padding: 28px;
  min-height: 235px;
  border: 1px solid rgba(16, 24, 40, .08);
  box-shadow: 0 18px 60px rgba(34, 20, 5, .08);
}

.problem .icon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #fff1d8, #ffe2f8);
  margin-bottom: 24px;
  font-size: 23px;
}

.problem h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 29px;
  line-height: 1;
  letter-spacing: -.045em;
  margin-bottom: 12px;
}

.problem p {
  color: #687184;
  margin-bottom: 0;
  font-size: 16px;
}

.how-wrap {
  background:
    radial-gradient(circle at 80% 0%, rgba(37, 67, 121, .22), transparent 36%),
    #0b1022;
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.step-card {
  border-radius: 24px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .058), rgba(255, 255, 255, .024));
  padding: 24px;
  min-height: 238px;
  position: relative;
  overflow: hidden;
}

.step-card::after {
  content: "";
  position: absolute;
  inset: auto -35px -45px auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 150, 56, .08);
}

.step-num {
  color: var(--orange);
  font-weight: 950;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 36px;
}

.step-card h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 29px;
  line-height: 1;
  letter-spacing: -.045em;
  margin-bottom: 12px;
}

.step-card p {
  color: #aeb8cc;
  margin-bottom: 0;
  font-size: 15px;
}

.moments {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 28px;
  align-items: stretch;
}

.moment-copy {
  border-radius: 30px;
  padding: 38px;
  background: #11182b;
  border: 1px solid var(--line-orange);
  color: var(--cream);
}

.moment-copy p {
  color: #b2bbce;
  font-size: 18px;
  margin: 18px 0 0;
}

.occasion-board {
  border-radius: 30px;
  background:
    radial-gradient(circle at 90% 18%, rgba(255, 150, 56, .16), transparent 28%),
    #fffaf2;
  padding: 28px;
  display: grid;
  gap: 12px;
  border: 1px solid rgba(16, 24, 40, .08);
  box-shadow: 0 18px 70px rgba(34, 20, 5, .10);
}

.occasion {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  background: #fff;
  border-radius: 20px;
  padding: 16px;
  color: #1d2333;
  border: 1px solid rgba(16, 24, 40, .07);
}

.occasion-icon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #fff0df;
  font-size: 22px;
}

.occasion strong { display: block; font-size: 16px; }
/* #687184 (not the mock's #788195): 4.9:1 on the white card, meeting WCAG AA
   for this 13px copy — the mock's value measured 3.9:1. */
.occasion span { color: #687184; font-size: 13px; }

.occasion .tag {
  color: #8d4517;
  background: #fff0df;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 900;
}

.quote {
  margin-top: 30px;
  border-radius: 32px;
  padding: 44px;
  background:
    radial-gradient(circle at 84% 12%, rgba(255, 150, 56, .11), transparent 30%),
    linear-gradient(135deg, #141d33, #0b1022);
  border: 1px solid var(--line-orange);
  color: var(--cream);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 26px;
  align-items: center;
}

.quote blockquote {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.06;
  letter-spacing: -.05em;
}

.quote cite {
  color: #aeb8cc;
  font-style: normal;
  font-size: 15px;
}

.final {
  max-width: 1180px;
  margin: 0 auto;
  padding: 78px 24px 96px;
  color: #172033;
  text-align: center;
}

.final-card {
  border-radius: 36px;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 150, 56, .16), transparent 27%),
    radial-gradient(circle at 82% 15%, rgba(37, 67, 121, .10), transparent 30%),
    #fffaf2;
  border: 1px solid rgba(16, 24, 40, .08);
  padding: 64px 34px;
  box-shadow: 0 22px 80px rgba(34, 20, 5, .10);
}

.final p {
  color: #687184;
  max-width: 650px;
  margin: 18px auto 30px;
  font-size: 19px;
}

.final .btn { color: #1d1016; }

.site-footer {
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px 24px 44px;
  color: var(--muted-2);
  font-size: 14px;
  text-align: center;
}

.site-footer a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer p { margin: 0 0 10px; }

.site-footer p:last-child { margin-bottom: 0; }

/* Static legal pages (privacy, terms) — rendered in the landing layout.
   Prose stays on the same cream/muted scale as the marketing sections;
   both --muted and --muted-2 keep WCAG AA contrast on the dark background. */
.legal-page {
  max-width: 780px;
  margin: 0 auto;
  padding: 26px 24px 10px;
}

.legal-page h1 { font-size: clamp(40px, 5vw, 58px); }

.legal-page h2 {
  font-size: 27px;
  letter-spacing: -.02em;
  margin: 40px 0 12px;
}

.legal-page p,
.legal-page li {
  color: var(--muted);
  font-size: 16px;
}

.legal-page ul {
  padding-left: 22px;
  margin: 0 0 16px;
}

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

.legal-page a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-updated {
  color: var(--muted-2);
  font-size: 14px;
}

.legal-review-note {
  border: 1px solid var(--line-orange);
  background: rgba(255, 150, 56, .10);
  border-radius: 14px;
  padding: 14px 18px;
  color: var(--cream-2);
  font-size: 15px;
  margin: 22px 0 34px;
}

@media (max-width: 1020px) {
  /* Below the single-row breakpoint the section links wrap onto a compact,
     centred second row instead of disappearing — keyboard/screen-reader
     users and anyone on mobile can still reach #how/#moments/#why without
     scrolling. Brand + auth actions keep the first row via order. */
  .nav { flex-wrap: wrap; row-gap: 2px; }

  .navlinks {
    order: 3;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 22px;
  }

  /* Comfortable tap targets without changing the visual weight. */
  .navlinks a { padding: 8px 4px; }

  .hero {
    grid-template-columns: 1fr;
    padding-top: 40px;
  }

  .hero-art { min-height: 500px; }

  .problem-grid, .steps, .moments {
    grid-template-columns: 1fr;
  }

  .quote { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  .light-panel,
  .light-panel-final {
    padding-left: 18px;
    padding-right: 18px;
  }

  .nav { padding: 18px; }
  .brand { font-size: 21px; }
  .brand-logo { width: 48px; height: 48px; }
  .btn.hide-mobile { display: none; }

  .hero {
    padding-left: 18px;
    padding-right: 18px;
    gap: 32px;
  }

  h1 { font-size: 54px; }

  .hero-copy { font-size: 18px; }

  .hero-art {
    min-height: auto;
    display: block;
  }

  .glow {
    width: 280px;
    height: 280px;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
  }

  .gift-stack {
    width: 100%;
    height: auto;
    display: grid;
    gap: 14px;
    padding-top: 40px;
  }

  .gift-card,
  .gift-card.main,
  .gift-card.secondary,
  .gift-card.note {
    position: relative;
    inset: auto;
    width: 100%;
    transform: none;
  }

  .section, .section.dark, .final {
    padding-left: 18px;
    padding-right: 18px;
  }

  .occasion {
    grid-template-columns: auto 1fr;
  }

  .occasion .tag {
    grid-column: 2;
    justify-self: start;
  }

  .final-card { padding: 42px 22px; }
}