/* ==========================================================================
   Budleday marketing site
   Tokens mirror constants/designTokens.ts in the app repo (budleday app).
   Rule carried over from the app's colour audit: no hex values outside the
   :root block: every colour is a token.
   ========================================================================== */

/* ---- Fonts (self-hosted, variable weight) -------------------------------- */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url(/fonts/nunito-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 200 1000;
  font-display: swap;
  src: url(/fonts/nunito-italic-latin.woff2) format('woff2');
}

/* ---- Tokens -------------------------------------------------------------- */
:root {
  /* colours, from designTokens.ts */
  --cream: #FDFCF9;
  --charcoal: #2B2B2B;
  --dark-grey: #595959;
  --grey: #8C8C8C;
  /* #8C8C8C is only 3.28:1 on cream, so it fails AA as small text. It stays
     for icons, borders and other non-text use; small text uses this instead
     (4.97:1). Mirror in designTokens.ts if the app adopts the same split. */
  --grey-text: #6E6E6E;
  --subtle-grey: #F0F0F1;
  --divider: #E0E0E0;
  --white: #FAFAFA;
  --pure-white: #FFFFFF;
  --card-border: rgba(0, 0, 0, 0.05);

  --teal-main: #5BC0B7;
  --teal-dark: #1F7A74;
  --teal-light: #AAD9CE;
  /* large headline accents on cream only (fails contrast for small text) */
  --teal-highlight: #409188;
  /* links and small teal text (passes at all sizes on cream) */
  --teal-link: #2E7067;

  --pink: #FE8FA7;
  --yellow: #F5E47D;
  --lavender: #E4CFE9;

  /* category palettes: accent for text/dots, tint for card backgrounds */
  --active-accent: #B03060;
  --active-tint: #FFE4EB;
  --mindful-accent: #1F7A74;
  --mindful-tint: #D6F0ED;
  --creative-accent: #8C7200;
  --creative-tint: #FDF0C8;
  --connection-accent: #6B4A80;
  --connection-tint: #EDE7F7;

  /* type */
  --font: 'Nunito', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;

  /* spacing scale */
  --sp-xs: 0.25rem;
  --sp-sm: 0.5rem;
  --sp-md: 1rem;
  --sp-lg: 1.5rem;
  --sp-xl: 2rem;
  --sp-xxl: 3rem;
  --sp-section: clamp(4rem, 9vw, 7rem);

  --radius-card: 20px;
  --radius-pill: 999px;
  --shadow-card: 0 6px 24px rgba(0, 0, 0, 0.06);

  --measure: 62ch;
  --container: 68rem;
}

/* ---- Base ---------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* The blobs deliberately overflow the viewport, so the page must clip
   horizontally or it pans sideways. This has to sit on html: on body it
   relies on the browser propagating overflow to the viewport, which
   Safari does not do for this value, and iOS scrolls sideways. */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--charcoal);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

a { color: var(--teal-link); }

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.section { padding-block: var(--sp-section); position: relative; }

/* Small teal label above a section title. Written in sentence case in the
   markup and uppercased here, so screen readers still say it normally. */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--teal-link); /* passes at small sizes, unlike teal-highlight */
  margin-bottom: var(--sp-sm);
}

.section-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: var(--sp-sm);
}
/* Accent phrase inside a heading. teal-highlight is large-text only, and
   the smallest .section-title is 28px bold, so it clears that bar. */
.section-title em {
  font-style: italic;
  color: var(--teal-highlight);
}

.section-lede {
  color: var(--dark-grey);
  max-width: var(--measure);
  margin-bottom: var(--sp-xxl);
}

/* Centred header block. Only on sections whose body is cards, never on the
   ones with paragraphs to read: centred prose is harder work. */
.is-centred .eyebrow,
.is-centred .section-title,
.is-centred .section-lede { text-align: center; }
.is-centred .section-lede { margin-inline: auto; }

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

/* ---- Buttons ------------------------------------------------------------- */
/* Teal pill, charcoal label: mirrors the app's primary button. Swap for
   Apple's official App Store badge artwork at launch. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  background: var(--teal-main);
  color: var(--charcoal);
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none;
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius-pill);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.btn:hover { transform: scale(1.03); box-shadow: var(--shadow-card); }
.btn:active { transform: scale(0.98); }

.btn-note {
  font-size: 0.875rem;
  color: var(--grey-text);
  margin-top: var(--sp-sm);
}

/* Pre-launch stand-in for the App Store badge: an outlined pill with a
   teal dot, saying the app is coming. Not a control, so it is a <p> rather
   than a link or a button. Remove this block when the badges go live. */
.coming-soon {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  border: 1.5px solid var(--teal-light);
  color: var(--teal-link);
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-pill);
}
.coming-soon::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--teal-main);
  flex-shrink: 0;
}

/* Apple's App Store badge. Their terms say use the artwork exactly as
   supplied, so the only thing set here is the rendered size: no hover
   transform, no shadow, no recolouring, unlike .btn above. 48px tall keeps
   it comfortably past Apple's minimum and past the 24px tap target. */
.app-store-badge { display: inline-block; }
.app-store-badge img { height: 48px; width: auto; }

/* ---- Header -------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 2;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
  padding-block: var(--sp-lg);
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.brand img.stones { width: 30px; height: auto; }
.brand img.wordmark { height: 22px; width: auto; }
/* UK trademark application pending: swap ™ for ® only once registration
   is granted (using ® before then is an offence under the Trade Marks Act). */
.brand .tm {
  align-self: flex-start;
  margin-left: -0.35rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--charcoal);
  line-height: 1;
}

.site-nav { display: flex; align-items: center; gap: var(--sp-xl); }
.site-nav a {
  color: var(--charcoal);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
}
.site-nav a:hover { color: var(--teal-link); }
.site-nav .btn { padding: 0.5rem 1.25rem; font-size: 0.9375rem; }

@media (max-width: 40rem) {
  .site-nav a:not(.btn) { display: none; }
}

/* ---- Blobs (decorative backgrounds) -------------------------------------- */
.blob {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  /* the global img max-width cap would clamp these to the viewport and
     silently undo their size; decorative blobs are meant to overflow */
  max-width: none;
}
/* Blob opacities matching the shipped app's measured render (Notion todo
   "Blob opacity tokens do not match the shipped app": pink 0.16,
   yellow 0.16, teal 0.19, lavender 0.20). The Design Tokens page's table
   (0.45/0.60) reads far heavier than the app; revisit when the canonical
   value is decided. */
.blob-pink { opacity: 0.12; }
.blob-teal { opacity: 0.19; }
.blob-yellow { opacity: 0.16; }
.blob-purple { opacity: 0.2; }
/* Blobs are never clipped mid-page: they render whole and flow across
   section boundaries, cut only by the viewport edges (body overflow-x
   clip). Every section's container sits above them so text stays clear. */
.section > .container { position: relative; z-index: 1; }

/* On phones the desktop pixel offsets would push almost the whole shape
   off screen, so blobs rescale to the viewport and hang about a third
   off their edge instead. !important beats the inline desktop styles. */
@media (max-width: 52rem) {
  .blob { width: min(840px, 216vw) !important; height: auto !important; }
  .blob-teal   { right: -64vw !important; }
  .blob-yellow { left:  -64vw !important; }
  /* stacked, the About section has no left column to sit in, so the blob
     sits behind the lower half of the copy instead. At 0.2 opacity the
     body text still clears AA over it. auto beats the inline offset. */
  .blob-purple {
    top: 34% !important;
    right: auto !important;
    left: -64vw;
  }
  /* right:auto keeps the desktop inline offset from fighting this one */
  .blob-pink   { left:  -64vw !important; right: auto !important; }
}

/* ---- Hero ---------------------------------------------------------------- */
.hero { padding-block: var(--sp-section); }
/* With no phone mockup beside it, the hero has nothing to balance against, so
   it centres on itself the way the app's own screens do. */
.hero .container { text-align: center; }
.hero h1 {
  font-size: clamp(2.625rem, 6.8vw, 4.25rem);
  font-weight: 600; /* lighter than the h1 default, for a softer hero */
  line-height: 1.18;
}
.hero h1 em {
  font-style: italic;
  color: var(--teal-highlight); /* large text only, per the colour audit */
}
.hero .tagline {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  color: var(--dark-grey);
  margin-top: var(--sp-lg);
  max-width: 34ch;
  margin-inline: auto;
}
.hero .intro {
  color: var(--dark-grey);
  margin-top: var(--sp-md);
  max-width: 44ch;
  margin-inline: auto;
}
.hero .cta { margin-top: var(--sp-xl); }

/* ---- Phone mockup ---------------------------------------------------------
   Unused while there are no screenshots: nothing on the page carries .phone
   today. Kept as the frame real screenshots slot into. See README. */
.phone {
  width: min(280px, 70vw);
  aspect-ratio: 9 / 19;
  background: var(--charcoal);
  border-radius: 44px;
  padding: 10px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
}
.phone-screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 36px;
  background: var(--cream);
  overflow: hidden;
  display: grid;
  place-items: center;
}
/* real screenshot slots in as: <img class="phone-shot" src="..."> */
.phone-shot { width: 100%; height: 100%; object-fit: cover; }
.phone-sm { width: min(210px, 60vw); border-radius: 36px; padding: 8px; }
.phone-sm .phone-screen { border-radius: 30px; }

/* ---- Quiet one-line band -------------------------------------------------- */
.band { text-align: center; }
.band p {
  /* 1.5rem floor: teal-highlight (3.64:1) only clears AA as large text,
     which starts at 24px. Any smaller and the em below needs 4.5:1. */
  font-size: clamp(1.5rem, 2.6vw, 1.625rem);
  font-weight: 600;
  max-width: 36ch;
  margin-inline: auto;
  color: var(--charcoal);
}
.band p em { font-style: italic; color: var(--teal-highlight); }

/* ---- How it works --------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-xl);
}
.step { text-align: center; }
.step h3 { font-size: 1.25rem; margin-bottom: var(--sp-xs); }
.step p { color: var(--dark-grey); font-size: 0.9875rem; max-width: 30ch; margin-inline: auto; }
.step-number {
  display: inline-grid;
  place-items: center;
  /* the only thing leading each step now that the mockups are gone */
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--teal-main);
  color: var(--charcoal);
  font-weight: 800;
  font-size: 1.25rem;
  margin-bottom: var(--sp-md);
}

@media (max-width: 52rem) {
  .steps { grid-template-columns: 1fr; gap: var(--sp-xxl); }
}

/* ---- Categories ----------------------------------------------------------- */
.categories {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-lg);
}
.category-card {
  border-radius: var(--radius-card);
  padding: var(--sp-xl);
  display: grid;
  gap: var(--sp-sm);
  border: 1px solid var(--card-border);
}
/* Category icon on its cream stone: the app's Home card treatment
   (CategoryStone.tsx). Cream stone tilted -6deg on a grounded contact
   shadow, full-colour icon upright on top at 0.55 of the stone's width.
   Ratios are the app's own: shadow 1.5x by 0.27x the stone, 8px of room
   beneath, shadow opacity 0.16. */
.card-stone {
  --stone-w: 68px;
  position: relative;
  width: calc(var(--stone-w) * 1.5);
  height: calc(var(--stone-w) + 8px);
  margin-bottom: var(--sp-sm);
}
.card-stone .shadow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--stone-w) * 1.5);
  height: calc(var(--stone-w) * 0.27);
  opacity: 0.16;
}
.card-stone .stone {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) rotate(-6deg);
  width: var(--stone-w);
  height: var(--stone-w);
}
.card-stone .icon {
  position: absolute;
  top: calc(var(--stone-w) * 0.225);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--stone-w) * 0.55);
  height: calc(var(--stone-w) * 0.55);
}
.category-card h3 { font-size: 1.375rem; }
.category-card p { color: var(--charcoal); font-size: 0.9875rem; }

.category-card.active     { background: var(--active-tint); }
.category-card.mindful    { background: var(--mindful-tint); }
.category-card.creative   { background: var(--creative-tint); }
.category-card.connection { background: var(--connection-tint); }

.categories-footnote {
  margin-top: var(--sp-xl);
  color: var(--dark-grey);
  font-size: 0.9375rem;
}

@media (max-width: 40rem) {
  .categories { grid-template-columns: 1fr; }
}

/* ---- Reflections ----------------------------------------------------------- */
/* One column now the phones are gone. The heading centres, but the prose
   stays left-aligned in a centred column: the .is-centred rule above keeps
   paragraphs out of centred text on purpose, and this section is all prose. */
.reflections .eyebrow,
.reflections .section-title { text-align: center; }
.reflections .section-lede { margin-inline: auto; }
.reflections .privacy-line {
  margin-top: var(--sp-lg);
  padding: var(--sp-md) var(--sp-lg);
  background: var(--mindful-tint);
  border-radius: var(--radius-card);
  font-weight: 600;
  max-width: var(--measure);
  margin-inline: auto;
}

/* ---- About ------------------------------------------------------------------ */
.about .container {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.about-photo-frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--subtle-grey);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* the real photo slots in as: <img class="about-photo" src="..." alt="..."> */
.about-photo { width: 100%; height: 100%; object-fit: cover; }
.about-text { display: grid; gap: var(--sp-md); max-width: var(--measure); }
.about-text .section-title { margin-bottom: var(--sp-xs); }
.about-text p { color: var(--dark-grey); }
/* large-text size so the teal-highlight accent passes contrast, per the
   colour audit */
.about-tagline { color: var(--charcoal); font-weight: 700; font-size: 1.25rem; }
.about-tagline em { font-style: italic; color: var(--teal-highlight); }
/* Lou's own hand, photographed and traced. Replaces the typed sign-off,
   so .about-signoff below is unused unless the typed version comes back. */
.about-signature { width: 160px; height: auto; }

.about-signoff {
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--dark-grey);
}
.about-text .btn,
.about-text .coming-soon,
.about-text .app-store-badge { justify-self: start; margin-top: var(--sp-sm); }

@media (max-width: 52rem) {
  .about .container { grid-template-columns: 1fr; }
}

/* ---- Pricing --------------------------------------------------------------- */
.pricing { text-align: center; }
.pricing .section-lede { margin-inline: auto; }
.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 20rem));
  gap: var(--sp-lg);
  justify-content: center;
  margin-bottom: var(--sp-xl);
}
.plan {
  position: relative;
  background: var(--pure-white);
  border: 1.5px solid var(--divider);
  border-radius: var(--radius-card);
  padding: var(--sp-xl);
  text-align: left;
  display: grid;
  gap: var(--sp-xs);
}
.plan.featured { border-color: var(--teal-main); box-shadow: var(--shadow-card); }
.plan-badge {
  position: absolute;
  top: -0.8rem; left: var(--sp-xl);
  background: var(--teal-main);
  color: var(--charcoal);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
}
.plan h3 { font-size: 1.25rem; }
.plan .price { font-size: 2rem; font-weight: 800; }
.plan .price span { font-size: 1rem; font-weight: 600; color: var(--dark-grey); }
.plan .plan-sub { color: var(--dark-grey); font-size: 0.9375rem; }

.pricing .disclosure {
  font-size: 0.8125rem;
  color: var(--grey-text);
  max-width: 52ch;
  margin: var(--sp-lg) auto 0;
}

@media (max-width: 44rem) {
  .plans { grid-template-columns: minmax(0, 20rem); }
}

/* ---- FAQ -------------------------------------------------------------------- */
.faq-list { max-width: 46rem; }
.faq-list details {
  border-bottom: 1px solid var(--divider);
  padding-block: var(--sp-md);
}
.faq-list summary {
  font-weight: 700;
  font-size: 1.0625rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-md);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: '+';
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--teal-link);
  flex-shrink: 0;
  transition: transform 150ms ease;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { color: var(--dark-grey); padding-top: var(--sp-sm); max-width: var(--measure); }

/* ---- Final CTA -------------------------------------------------------------- */
.closing { text-align: center; }
.closing h2 { font-size: clamp(1.875rem, 4.5vw, 2.75rem); }
.closing h2 em { font-style: italic; color: var(--teal-highlight); }
.closing .cta { margin-top: var(--sp-xl); }

/* ---- Footer ----------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--divider);
  padding-block: var(--sp-xxl);
  position: relative;
  z-index: 1;
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
}
.site-footer .brand img.stones { width: 26px; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--sp-lg); }
.footer-links a { color: var(--dark-grey); text-decoration: none; font-size: 0.9375rem; }
.footer-links a:hover { color: var(--teal-link); }
.site-footer .copyright { width: 100%; color: var(--grey-text); font-size: 0.8125rem; }

/* ---- Legal pages (terms / privacy) ------------------------------------------ */
.legal { padding-block: var(--sp-xxl) var(--sp-section); }
.legal .container { max-width: 46rem; }
.legal h1 { font-size: clamp(2rem, 5vw, 2.75rem); margin-bottom: var(--sp-xs); }
.legal .updated { color: var(--grey-text); font-size: 0.9375rem; margin-bottom: var(--sp-xxl); }
.legal h2 { font-size: 1.375rem; margin: var(--sp-xxl) 0 var(--sp-sm); }
.legal p, .legal li { color: var(--dark-grey); margin-bottom: var(--sp-md); }
.legal ul { padding-left: 1.25rem; margin-bottom: var(--sp-md); }
.legal li { margin-bottom: var(--sp-sm); }

/* ---- Focus ------------------------------------------------------------------- */
/* The offset holds the ring clear of the button fill, so its neighbour on
   both sides is cream, where teal-link sits at 5.64:1. */
:focus-visible {
  outline: 2px solid var(--teal-link);
  outline-offset: 5px;
}

/* ---- Motion ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .faq-list summary::after { transition: none; }
}