/*
 * Rexsi web landing page — shared styles.
 *
 * This is the FULL page (rexsi.app/<venue-slug>) — meant to be a genuine
 * copy of RexyDetailScreen's own content, per Megan's "the website should
 * be a complete copy of the rexsi from the app" call. Structure and every
 * card color/spacing value below were checked directly against
 * app/src/screens/RexyDetailScreen.tsx's actual styles, not eyeballed from
 * a screenshot — the page is NOT one continuous card; it's a stack of
 * independently-floating cards, each with its own shadow and rounded
 * corners:
 *   - page background: WHITE — a deliberate web-only departure from
 *     RexyDetailScreen's own tan `container` background, per Megan's
 *     explicit "make the webpage white not tan" call. Everything else
 *     (card colors/structure below) still matches the in-app screen.
 *   - titleCard: WHITE, pulled up over the photo (RexyDetailScreen.titleCard).
 *   - quoteCard: WHITE, holds the quote AND the provenance line together
 *     (RexyDetailScreen.quoteCard + provenanceText, same card).
 *   - whyBlock: its own distinct tan (#F1E4D2, NOT the same tan as the page
 *     background) — RexyDetailScreen.whyBlock / WHY_CARD_BACKGROUND.
 *   - trustRow / trustList: WHITE cards (RexyDetailScreen.trustRow / .trustList).
 * Each card has its own shadow and rounded corners with page-color gaps
 * between them — not one big enclosing box.
 *
 * Fonts: Roboto 700 Bold for display text — matches tokens.ts's current
 * live ACTIVE_DISPLAY_FONT ('roboto'), per Megan's confirmation. Caveat
 * 700 Bold for the quote text matches quoteText in both RexyDetailScreen
 * and RexyShareCard exactly.
 */

:root {
  --coral: #F06F4F;
  --seafoam: #79B9AD;
  --blue: #1976C9;
  --navy: #24364B;
  --page-bg: #FFFDFC;    /* white — the page itself (header + footer), per Megan's "webpage should be white" call */
  --box-bg: #F7EBDD;     /* colors.ivory — RexyDetailScreen's own container tan, boxed here per Megan's "make a box... make that box tan" call */
  --why-bg: #F1E4D2;     /* WHY_CARD_BACKGROUND — RexyDetailScreen's own why-block tan, unchanged */
  --white: #FFFDFC;
  --border: #DED7CC;
  --gray-100: #F7F3EE;
  --gray-400: #B7C0C8;
  --gray-500: #68727C;
  --gray-600: #4A5963;

  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;

  --shadow-sm: 0 1px 3px rgba(36, 54, 75, 0.10), 0 1px 2px rgba(36, 54, 75, 0.06);
  --shadow-md: 0 4px 10px rgba(36, 54, 75, 0.12), 0 2px 4px rgba(36, 54, 75, 0.08);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--page-bg);
  color: var(--navy);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 420px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---- No more standalone header bar — per Megan's "Rexsi logo is always
   in the left top corner... move the picture all the way up to the top of
   the page" call: the big centered wordmark banner is gone, the photo now
   runs flush to the very top of the page (matching RexyDetailScreen
   in-app, which has no header row above its photo either — just the
   floating back/more buttons on the photo itself), and the wordmark moves
   to a small badge floating over the photo's top-left corner instead. See
   .page-logo-badge / .page-logo below. ---- */

/* ---- Photo — bare, no card wrapper, matching photoWrap in-app (which
   sits directly in the scroll view, not inside any card). Square all the
   way around — top rounding removed per Megan's earlier "no rounded edges
   on the top of the agricola picture" call, and now the photo is the very
   first thing on the page anyway (no header above it to flow from);
   bottom stays square since titleCard pulls up over it. ---- */
.photo-wrap {
  position: relative;
}

/* ---- Small corner wordmark, floating on the photo — per Megan's "Rexsi
   logo is always in the left top corner... keep it the regular size."
   "Regular size" = the same small corner-logo treatment already
   established on this site (home-hero-logo), not the old header's big 40px
   banner version. A soft white "cloud" pill sits behind it (translucent +
   blurred, frosted-glass style) purely so the navy/coral wordmark stays
   legible over a busy photo. ---- */
.page-logo-badge {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 2;
  display: inline-flex;
  background: rgba(255, 253, 252, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius-full);
  padding: 7px var(--space-md) 5px;
  box-shadow: var(--shadow-sm);
}

.page-logo {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  /* Matches home-hero-logo's own size exactly — the only other place on
     this site a wordmark floats over a photo in a page's top-left corner,
     so "regular size" means this, not the old header's oversized 40px
     banner version. */
  font-size: 26px;
  color: var(--navy);
  text-decoration: none;
  line-height: 1;
}

.page-logo .x {
  color: var(--coral);
}

.photo {
  width: 100%;
  aspect-ratio: 360 / 220;
  object-fit: cover;
  display: block;
  background: var(--border);
  border-radius: 0;
}

/* ---- Trust Signal pill (floating "Trusted by N in ...Circle" over the
   photo) removed Sept 2026 per Megan's call — repetitive with the Trust
   Trail below, and "Trusted by" wasn't the right wording anyway. Rules
   removed from here, the generator template, both mockup files, and the
   in-app RexyDetailScreen/VenueProfileScreen it was ported from
   (trustPillFloat/rexsisPill). ---- */

/* ---- Tan box — wraps the photo through the Trust Trail (title-card,
   quote-card, why-block, actions, trust-section), matching the app's own
   continuous tan container background but scoped as a bounded box here
   since the page around it is white. Per Megan's "make a box that runs
   down from the hero down to the very bottom of 2 in megans circle
   recommend this - then make that box tan" call. Footer sits below it,
   outside the box, on the white page. ---- */
.tan-box {
  background: var(--box-bg);
  /* Square top (flows straight down from the now-tan header above, no
     rounding to clip the photo against), rounded bottom — matches the
     photo's own now-square top corners. */
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.content {
  padding: 0 var(--space-lg) var(--space-lg);
}

.footer {
  padding: 0 var(--space-lg);
}

/* ---- Title card — WHITE, pulled up over the photo's bottom edge, its
   own shadow. Matches RexyDetailScreen.titleCard exactly (marginTop -32,
   paddingTop spacing.sm, paddingBottom spacing.lg). ---- */
.title-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  margin-top: -32px;
  padding: var(--space-sm) var(--space-lg) var(--space-lg);
  box-shadow: var(--shadow-md);
  position: relative;
}

.venue-name {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.25;
  color: var(--navy);
  margin: 0;
}

.meta {
  font-size: 14px;
  color: var(--gray-600);
  margin: 4px 0 0;
}

/* ---- Trust Score + rank — plain text, no badge chrome, matching
   RexyDetailScreen's scoreRankRow. ---- */
.score-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

.score-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}

.score-label,
.rank-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
}

/* ---- Quote card — WHITE, holds the quote AND the provenance line
   together (same card in-app, not two separate elements). ---- */
.quote-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-top: var(--space-lg);
  box-shadow: var(--shadow-sm);
}

.quote-icon {
  display: inline-block;
  vertical-align: -3px;
}

.quote-icon.flip {
  /* Closing mark was sitting noticeably lower than the opening one — per
     Megan's "end quotes on the rexsi itself are too low" — raised to sit
     level with it. Verified against the ACTUAL Caveat font (this value
     was first tuned against a broken build that had silently fallen back
     to a generic serif — fonts.googleapis.com isn't reachable from the
     sandbox that renders local previews — so an earlier -11px pass looked
     fixed there but was still visibly low with the real font Caveat
     loaded; re-tested side-by-side with the real font before settling on
     this value). */
  transform: scaleX(-1) scaleY(-1) translateY(-22px);
}

.quote-text {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: var(--navy);
  margin: 0;
}

/* Provenance line — recommender's photo next to their name, sitting
   inside the quote card right under the quote. Web-only addition (the
   in-app provenanceText is plain text, no avatar) per Megan's explicit
   "the rexsi quote should have the person's profile pic next to their
   name" call. */
.provenance-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.provenance-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--gray-100);
}

.provenance-text-col {
  display: flex;
  flex-direction: column;
}

.provenance-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}

.provenance-date {
  font-size: 12px;
  color: var(--gray-500);
  margin: 2px 0 0;
}

/* ---- Quick-tags card — mockup for a Rexsi with NO written quote, only
   the "Quick tags" chips from the real Add-a-Rexsi flow (Reliable & on
   time / Fair pricing / Great communication — see QUICK_TAGS in
   AddRexyQuoteScreen.tsx). Shown in their real "selected" chip style
   (filled seafoam, white text) since these ARE the ones the recommender
   picked — real UI, not invented for the web. Replaces the quote-card
   for this lighter Rexsi type; per Megan's "mock up what these rexsis
   look like if theres only the quotation rexsi - or only the quick tag
   rexsis" call. ---- */
.quick-tags-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-top: var(--space-lg);
  box-shadow: var(--shadow-sm);
}

.quick-tags-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-600);
  margin: 0 0 var(--space-sm);
}

.quick-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.quick-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--seafoam);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
}

/* ---- "Why {name} recommends {venue}" — its own distinctly-tan card
   (--why-bg, #F1E4D2), deliberately different from the page's own tan
   (--page-bg, #F7EBDD) — see WHY_CARD_BACKGROUND's comment in
   RexyDetailScreen.tsx. ---- */
.why-block {
  background: var(--why-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-top: var(--space-lg);
  box-shadow: var(--shadow-sm);
}

.why-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}

.why-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-600);
  margin: var(--space-xs) 0 0;
}

/* Dot + label + "|" divider, matching RexyDetailScreen's tagsRow exactly
   (no pill/chip background, just a small solid dot before each tag). */
.tags-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-md);
}

.tag-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tag-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
}

.tag-divider {
  color: var(--border);
  font-size: 12px;
}

/* ---- Action buttons — checked directly against RexyDetailScreen's own
   isMine action styles (whatsappActionButton / shareActionButton /
   secondaryActionsRow / secondaryActionCard), not the earlier invented
   3-button layout. Per Megan's "the buttons should match the real rexsi
   exactly" call. Sit directly on the page background, no card wrapper —
   same as in-app. ---- */
.actions {
  margin-top: var(--space-xl);
}

.icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* WhatsApp — big, quiet white-outlined button with the green icon/text,
   on top of the group. Non-functional here exactly like in-app (no real
   number wired anywhere in the data model yet) — same inert state as the
   in-app button, not styled as "disabled/coming soon" since the real
   screen doesn't mark it that way either. */
.whatsapp-btn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 2px solid #4F9D74;
  padding: var(--space-md) 0;
  box-shadow: var(--shadow-sm);
  font-size: 16px;
  font-weight: 700;
  color: #4F9D74;
  cursor: default;
}

/* Download Rexsi Now — coral, filled, solid shadow, right below WhatsApp.
   This replaces the earlier "Share this Rexsi" primary button — per
   Megan's call, a visitor without the app shouldn't be nudged to share
   someone else's Rexsi further (it isn't theirs to pass along); the whole
   point of this fallback page is getting THEM the app, so that's the
   primary CTA now. No real App Store listing exists yet, so — same
   convention as WhatsApp/Instagram — this is visually normal but
   genuinely inert, not styled as "disabled." This also replaces the old
   small dashed "Install Rexsi — coming soon" button, which is now
   redundant. */
.download-btn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  background: var(--coral);
  border-radius: var(--radius-lg);
  border: none;
  padding: var(--space-md) 0;
  margin-top: var(--space-sm);
  box-shadow: var(--shadow-md);
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  cursor: default;
}

/* View on Map / Instagram — smaller, secondary tiles underneath. View on
   Map is real (same Google Maps link as before); Instagram is inert,
   matching in-app exactly (no per-venue handles exist yet). */
.secondary-row {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.secondary-card {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: none;
  padding: var(--space-sm) 0;
  box-shadow: var(--shadow-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  cursor: pointer;
}

.secondary-card.inert {
  cursor: default;
}

/* ---- Trust Trail — collapsed by default, matching RexyDetailScreen's own
   showTrustList state (starts false; tapping trustRow expands trustList).
   .trust-section wraps trust-row + trust-list; JS toggles the "open"
   class on it. Per Megan's "keep that closed dont show the two ppl" call. ---- */
.trust-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  margin-top: var(--space-lg);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  border: none;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
}

.trust-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(121, 185, 173, 0.22); /* tintColor(seafoam, 0.85) approximated */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trust-text-block {
  flex: 1;
  min-width: 0;
}

.trust-title {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy);
  margin: 0;
}

.trust-face-stack {
  display: flex;
  align-items: center;
  margin-top: var(--space-xs);
}

.trust-face-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--white);
  background: var(--gray-100);
}

.trust-face-avatar + .trust-face-avatar {
  margin-left: -8px;
}

.trust-subtitle {
  font-size: 12px;
  color: var(--gray-500);
  margin: 1px 0 0;
}

.trust-chevron {
  flex-shrink: 0;
  color: var(--gray-400);
  display: flex;
  transition: transform 0.15s ease;
}

.trust-section.open .trust-chevron {
  transform: rotate(180deg);
}

/* ---- Trust Trail list — its OWN separate WHITE card just under trustRow
   (small gap, spacing.xs), matching RexyDetailScreen.trustList exactly —
   not part of the trustRow card itself. Hidden until trust-row is tapped
   (RexyDetailScreen's showTrustList starts false). ---- */
.trust-list {
  display: none;
  background: var(--white);
  border-radius: var(--radius-lg);
  margin-top: var(--space-xs);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.trust-section.open .trust-list {
  display: block;
}

.trust-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  border-bottom: 1px solid var(--gray-100);
}

.trust-list-item:last-child {
  border-bottom: none;
}

.trust-list-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.trust-list-text {
  flex: 1;
  min-width: 0;
}

.trust-list-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}

.trust-list-relationship {
  font-size: 10px;
  font-weight: 600;
  color: var(--gray-400);
  margin: 1px 0 0;
}

.trust-list-quote {
  font-size: 12px;
  color: var(--gray-600);
  margin: 1px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trust-list-date {
  font-size: 12px;
  color: var(--gray-500);
  flex-shrink: 0;
}

/* ===========================================================================
   HOMEPAGE (rexsi.app root) — a real marketing landing page. V3: rebuilt
   against Megan's fuller reference (real photo behind the hero, tilted
   realistic phone, no boxy white cards) after her "so boring... lost all
   the personality... phone is weirdly fat... too boxy" call. Still no top
   nav (her explicit call), still the app's real wordmark (her explicit
   call), still real data everywhere it can be (Agricola's actual Trust
   Score 80, real category colors from tokens.ts, the app's real bottom-nav
   tabs — BottomNavigationShell.tsx). Background photo is a placeholder
   crop from Megan's own reference image (a real Baja coastal scene) until
   she sends a final one to swap in.
   =========================================================================== */

.home-page {
  background: var(--box-bg);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ---- Hero: full-bleed background photo starting at the very top of the
   page (no header bar above it now), fading left-to-right into the page's
   tan background so the text column stays readable — per Megan's "picture
   goes all the way up the left side and fades as it goes right." A big
   real wordmark sits above the headline inside the text column itself,
   replacing the old separate centered header row. ---- */
.home-hero {
  position: relative;
  overflow: hidden;
}

.home-hero-bg {
  display: none;
}

.home-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--box-bg) 0%, var(--box-bg) 34%, transparent 62%);
}

.home-hero-bg-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right top;
  display: block;
}

.home-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0;
  padding: 76px var(--space-lg) 0;
}

.home-hero-text {
  width: 100%;
  text-align: left;
  position: relative;
  z-index: 3;
}

/* Positioned within .home-hero-inner (not .home-hero) so its left edge
   always matches the headline's left edge — same padding, same box —
   regardless of viewport width. */
.home-hero-logo {
  position: absolute;
  top: var(--space-xl);
  left: var(--space-lg);
  z-index: 4;
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: var(--navy);
  text-decoration: none;
}

.home-hero-logo .x { color: var(--coral); }

.home-headline {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: 38px;
  line-height: 1.14;
  margin: 0;
}

.home-headline .line-navy { color: var(--navy); }
.home-headline .line-coral { color: var(--coral); }

/* ---- Oversized colored periods — same accent-dot idea as the footer's
   Find. Trust. Recommend. treatment, applied to the headline and closing
   tagline. ---- */
.headline-dot {
  font-size: 1.05em;
  position: relative;
  top: 0.1em;
  margin-left: -0.08em;
}

.dot-blue { color: var(--blue); }
.dot-seafoam { color: var(--seafoam); }
.dot-coral { color: var(--coral); }

.home-subcopy {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--gray-600);
  margin: var(--space-md) 0 0;
  max-width: 420px;
}

/* ---- Waitlist — the real primary CTA (app isn't live yet, so "join the
   waitlist" is more honest and more useful than a dead download button).
   Wired to Megan's real Formspree form; submits via JS for an inline
   success message (see the script at the end of index.html). ---- */
.waitlist-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

/* The `hidden` attribute is set via JS once the signup succeeds — without
   this override, .waitlist-form's own `display: flex` above beats the
   browser's default [hidden] rule and the form never actually disappears. */
.waitlist-form[hidden] {
  display: none;
}

.waitlist-input {
  flex: 1;
  min-width: 200px;
  max-width: 260px;
  font: inherit;
  font-size: 15px;
  padding: 14px var(--space-lg);
  border-radius: var(--radius-full);
  border: none;
  background: var(--white);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}

.waitlist-input::placeholder {
  color: var(--gray-400);
}

.waitlist-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  background: var(--coral);
  border: none;
  border-radius: var(--radius-full);
  padding: 14px var(--space-xl);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}

.waitlist-btn:disabled {
  opacity: 0.7;
  cursor: default;
}

.waitlist-message {
  margin-top: var(--space-xl);
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}

.waitlist-message-error {
  color: var(--coral);
}

.home-tagline-accent {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  margin: var(--space-lg) 0 0;
}

.home-tagline-accent-rule {
  display: block;
  width: 100%;
  height: 6px;
  margin-top: 4px;
}

.home-store-note {
  font-size: 13px;
  color: var(--gray-500);
  margin: var(--space-sm) 0 0;
}

/* ---- Hero visual: just the phone now — the photo lives behind the whole
   hero as .home-hero-bg, so this column is only the tilted phone mockup,
   stacked below the text on mobile and side-by-side with it on desktop
   (see the 900px media query below). ---- */
.home-hero-visual {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--space-2xl);
}

.home-hero-mobile-photo {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-lg);
  display: block;
}

.home-hero-phone-wrap {
  position: relative;
  margin-top: -70px;
  transform: rotate(-3deg);
  z-index: 3;
}

.phone-frame {
  position: relative;
  width: 240px;
  background: linear-gradient(155deg, #2c3e52, #1a2735);
  border-radius: 40px;
  padding: 12px 10px;
  box-shadow: 0 24px 48px rgba(20, 30, 43, 0.35), 0 6px 16px rgba(20, 30, 43, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  /* Compensates for .phone-screen's padding-top going to 0 (hero photo now
     flush with the top) — keeps the phone's overall footprint the same so
     content stacked below it on mobile (features, closing tagline) doesn't
     shift up too. */
  margin-bottom: 34px;
}

.phone-notch {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 62px;
  height: 20px;
  background: #0f1720;
  border-radius: var(--radius-full);
  z-index: 2;
}

.phone-home-indicator {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 4px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-full);
  z-index: 2;
}

.phone-screen {
  position: relative;
  background: var(--box-bg);
  border-radius: 30px;
  overflow: hidden;
  padding-top: 0;
  min-height: 480px;
}

/* ---- Hero: real photo, navy header + tagline text laid directly on top
   of it (no scrim — that's what the real HomeScreen.tsx does), wave-SVG
   cutout bleeding into the phone's ivory background below it. ---- */
.phone-hero {
  position: relative;
}

.phone-hero-img {
  width: 100%;
  height: 128px;
  object-fit: cover;
  display: block;
}

.phone-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 6px var(--space-sm) 0;
}

.phone-hero-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.phone-app-logo {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--navy);
}

.phone-app-logo .x { color: var(--coral); }

.phone-hero-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 600;
  color: var(--navy);
}

.phone-hero-tagline {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.15;
  color: var(--navy);
  margin: 18px 0 0;
}

.phone-hero-wave {
  display: block;
  margin-top: -2px;
}

.phone-body {
  padding: 0 var(--space-sm);
}

.phone-subtitle {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.15;
  color: var(--navy);
  margin: 2px 0 0;
}

.phone-search-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 7px var(--space-sm);
  margin-top: 6px;
}

.phone-search-bar span {
  font-size: 9px;
  color: var(--gray-500);
}

.phone-section-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--navy);
  margin: var(--space-sm) 0 0;
}

/* ---- Category tiles: real CategoryTile.tsx treatment — a solid tinted
   rounded box per category (not a bare circle) holding icon + label +
   count, matching the actual Discover-screen grid. ---- */
.phone-category-row {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-top: 6px;
}

.phone-category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 23%;
  border-radius: 10px;
  padding: 7px 2px 6px;
}

/* Real app icon set (matches the actual Discover-screen category icons,
   swapped in for the earlier placeholder line-icons so the mockup stays
   in sync with the real app). */
.phone-category-icon {
  width: 17px;
  height: 17px;
  object-fit: contain;
  display: block;
}

.phone-category-label {
  font-size: 6.5px;
  font-weight: 700;
  color: var(--navy);
  text-align: center;
  line-height: 1.1;
  margin-top: 1px;
}

.phone-category-count {
  font-size: 6px;
  font-weight: 600;
  color: var(--navy);
  opacity: 0.65;
}

/* ---- "Trusted at your place" banner — real copy, white card, pale
   seafoam icon circle, chevron. ---- */
.phone-trusted-banner {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: var(--space-sm);
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 7px var(--space-sm);
  box-shadow: var(--shadow-sm);
}

.phone-trusted-banner-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  background: rgba(121, 185, 173, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-trusted-banner-text {
  flex: 1;
}

.phone-trusted-banner-title {
  font-size: 9px;
  font-weight: 700;
  color: var(--navy);
}

.phone-trusted-banner-sub {
  font-size: 6.5px;
  line-height: 1.25;
  color: var(--gray-500);
  margin-top: 1px;
}

.phone-nearyou-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--space-md);
}

.phone-nearyou-header span:first-child {
  font-size: 10px;
  font-weight: 700;
  color: var(--navy);
}

.phone-see-all {
  font-size: 7.5px;
  font-weight: 600;
  color: var(--seafoam);
}

/* ---- Feed card: real RexsiFeedCard.tsx layout — photo LEFT, content
   RIGHT (category tag, name, bookmark; inline-quote-icon quote; author +
   location row), then a full-width trust-avatar-stack + social-proof row
   below, all inside one white card. No trust-score badge — the real
   component doesn't render one. ---- */
.phone-feed-card {
  margin-top: 6px;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  box-shadow: var(--shadow-sm);
}

.phone-feed-top {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.phone-feed-photo {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.phone-feed-content {
  flex: 1;
  min-width: 0;
}

.phone-feed-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4px;
}

.phone-feed-category {
  font-size: 5.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--gray-500);
}

.phone-feed-name {
  font-family: 'Roboto', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: var(--navy);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phone-feed-quote {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.2;
  color: var(--navy);
  margin: 3px 0 0;
}

.phone-feed-quote-icon {
  transform: translateY(1px);
  margin-right: 1px;
}

.phone-feed-author-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.phone-feed-avatar {
  width: 15px;
  height: 15px;
  min-width: 15px;
  border-radius: 50%;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6.5px;
  font-weight: 700;
  color: var(--navy);
}

.phone-feed-author-text {
  min-width: 0;
}

.phone-feed-author-line {
  font-size: 6.5px;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phone-feed-location {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 6.5px;
  color: var(--gray-500);
  margin-top: 1px;
}

.phone-trust-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
}

.phone-trust-avatars {
  display: flex;
}

.phone-trust-avatar,
.phone-trust-avatar-img {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--box-bg);
  margin-left: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  object-fit: cover;
}

.phone-trust-avatar.first {
  margin-left: 0;
  background: var(--seafoam);
  font-size: 6px;
  font-weight: 700;
  color: var(--white);
}

.phone-trust-avatar.overflow {
  background: var(--navy);
  font-size: 5.5px;
  font-weight: 700;
  color: var(--white);
}

.phone-trust-social {
  flex: 1;
  font-size: 6.5px;
  line-height: 1.2;
  color: var(--gray-600);
}

/* ---- Floating "+ Add a Rexsi" FAB — real HomeScreen.tsx styles.fab. ---- */
.phone-fab {
  position: absolute;
  right: 8px;
  bottom: 64px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--coral);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  z-index: 2;
}

.phone-fab-text {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 6.5px;
  line-height: 1.05;
  color: var(--white);
  text-align: center;
  margin-top: 1px;
}

.phone-tabbar {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-sm) 22px;
  background: var(--white);
  border-top: 1px solid var(--gray-100);
}

.phone-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 22%;
}

.phone-tab span {
  font-size: 6px;
  font-weight: 600;
  color: var(--gray-500);
  text-align: center;
}

.phone-tab.active span {
  color: var(--seafoam);
}

/* ---- Lighter section below the hero — separates the tan/photo hero
   ("top") from the feature highlights, closing tagline, and footer
   ("bottom") with a visible break in background color. ---- */
.home-lower {
  background: #FDFAF6; /* box-bg (#F7EBDD), 3 shades lighter */
  padding-bottom: var(--space-lg);
}

/* ---- Feature highlights — no white boxes (per Megan's "too boxy" call):
   just an icon circle + title + text sitting directly on the page, with a
   thin divider line between items on desktop, matching her reference's
   plain three-up layout instead of cards. ---- */
.home-features {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg) 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  text-align: center;
}

.home-feature-icon {
  display: block;
  width: 84px;
  height: auto;
  margin: 0 auto var(--space-md);
}

.home-feature-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}

.home-feature-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-600);
  margin: var(--space-xs) auto 0;
  max-width: 260px;
}

.home-closing-tagline {
  text-align: center;
  padding: var(--space-xl) var(--space-lg) 0;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 32px;
  color: var(--navy);
}

/* ---- Mobile-only text bump (+2px) per Megan's "up the font size on
   mobile a little" — scoped so it doesn't touch the already-tuned desktop
   sizes above 900px. ---- */
@media (max-width: 899px) {
  .home-hero-logo {
    font-size: 28px;
  }
  .home-headline {
    font-size: 42px;
  }
  .home-subcopy {
    font-size: 18px;
  }
  .waitlist-input,
  .waitlist-btn {
    font-size: 17px;
  }
  .home-feature-title {
    font-size: 19px;
  }
  .home-feature-text {
    font-size: 16px;
  }
  .home-closing-tagline {
    font-size: 34px;
  }

  /* A bit more breathing room between the "Rexsi" logo and the headline
     below it on mobile, per her request. */
  .home-hero-text {
    margin-top: var(--space-lg);
  }

  /* ---- Mobile hero: COPY -> PHOTO -> small PHONE -> FEATURES, as its own
     stacked composition rather than the desktop artwork's absolute-position
     overlap squeezed into a narrow column. Everything here resets position,
     transform, fixed widths and negative margins back to normal document
     flow — none of the desktop hero's overlap tricks carry over. ---- */
  .home-hero-visual {
    /* Now the sizing frame for the photo + phone: the phone sets this
       container's real height (via its own padding-top below), and the
       photo fills it via absolute positioning — so the photo always
       matches however tall the phone ACTUALLY renders on a given device/
       font stack, instead of a guessed pixel height that drifted from
       what her real phone rendered. */
    position: relative;
    display: block;
    /* True full-bleed: break out of .home-hero-inner's side padding so the
       photo reaches both screen edges with no gap, per the mockup. */
    width: calc(100% + 2 * var(--space-lg));
    margin-top: var(--space-xl);
    margin-right: calc(-1 * var(--space-lg));
    margin-bottom: 0;
    margin-left: calc(-1 * var(--space-lg));
    /* Shows through below the photo's bottom edge (the overhang strip
       beside the phone's bottom-nav row). She calls this shade "the
       bottom nav / footer color" — it's .home-lower's #FDFAF6, NOT the
       phone mockup's white tabbar (that was the earlier misread) — so
       match #FDFAF6 exactly, flush with .home-lower right below it, with
       no separate white band in between. */
    background: #FDFAF6;
  }
  .home-hero-mobile-photo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    /* Ends a fixed PERCENTAGE above the container's (= the phone's) bottom
       edge, not a fixed pixel amount — her real phone renders the phone
       mockup noticeably taller than desktop Chromium did, which made a
       fixed 100px overhang shrink to almost nothing proportionally. A
       percentage keeps the same ~14% overhang regardless of how tall the
       phone actually renders on a given device. */
    height: 86%;
    object-fit: cover;
    /* Higher-res source (same file already used on desktop) — fixes the
       upscale blur from the old low-res mobile-only crop. Shifted as far
       left as the crop allows so more of the coastline/ocean shows instead
       of the photo's cactus/flowers side. */
    object-position: 0% center;
    border-radius: 0;
    display: block;
    z-index: 1;
  }
  .home-hero-phone-wrap {
    position: relative;
    display: block;
    width: 74vw;
    max-width: 310px;
    margin: 0 auto;
    /* Clear strip of photo showing above the phone (the photo, positioned
       absolute behind this padding, shows through it). */
    padding-top: 90px;
    transform: rotate(-1deg);
    z-index: 2;
  }
  .phone-frame {
    width: 100%;
    margin-bottom: 0;
    /* Tighter, softer shadow on mobile — the desktop shadow's 48px blur
       was casting a visible gray halo into the tan background below the
       phone, making the flat tan look like a mismatched color there. */
    box-shadow: 0 10px 20px rgba(20, 30, 43, 0.16), 0 3px 6px rgba(20, 30, 43, 0.1);
  }
}

@media (min-width: 900px) {
  .home-hero {
    height: 600px;
    overflow: visible;
  }
  .home-hero-bg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 600px;
    overflow: hidden;
    z-index: 0;
  }
  .home-hero-inner {
    display: flex;
    align-items: center;
    gap: var(--space-2xl);
    padding-top: var(--space-2xl);
    padding-left: var(--space-2xl);
    min-height: 600px;
  }
  .home-hero-text {
    flex: 0 0 48%;
    align-self: center;
    /* Nudged up noticeably per her "on the website" note. */
    margin-top: -110px;
  }
  .home-hero-logo {
    font-size: 34px;
    top: var(--space-lg);
    left: var(--space-2xl);
  }
  .home-headline {
    font-size: 64px;
  }
  .home-hero-visual {
    flex: 0 0 48%;
    align-items: flex-end;
    margin-top: 0;
  }
  .home-hero-mobile-photo {
    display: none;
  }
  .home-hero-phone-wrap {
    margin-top: 0;
    transform: rotate(-4deg);
  }
  .phone-frame {
    width: 260px;
  }
  .phone-screen {
    min-height: 520px;
  }
  .home-features {
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
    padding-top: var(--space-lg);
  }
  .home-features > div:not(:last-child) {
    border-right: 1px solid var(--border);
    padding-right: var(--space-xl);
  }
  .home-closing-tagline {
    padding-top: var(--space-lg);
    margin-top: 0;
  }
}

.home-footer {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg) var(--space-2xl);
}

/* ---- Footer ---- */
.footer {
  text-align: center;
  margin-top: var(--space-xl);
}

.tagline {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  margin: 0;
}

.tagline .dot-blue { color: var(--blue); font-weight: 700; }
.tagline .dot-seafoam { color: var(--seafoam); font-weight: 700; }
.tagline .dot-coral { color: var(--coral); font-weight: 700; }