/* ==========================================================================
   Marketing-theme shared stylesheet
   ==========================================================================
   For pages that want the landing page's visual language (nav, section
   rhythm, FAQ, closing CTA, footer) without the landing page's own
   photo-rotating hero, bento toggle, or destination modal -- all of
   which are specific to that one page and not reusable content.

   Everything here is adapted FROM landing.css, which is left completely
   untouched: page-specific rules and animations were dropped, and one
   new pattern was added (.marketing-hero, .pillar-grid/.pillar-card)
   for pages that need a simple dark banner and a feature grid instead
   of landing.html's own hero and bento sections.

   First used by /about; intended to be reused by /settings, /contact,
   and /my-trips once that redesign is approved.
   ========================================================================== */

main.marketing-main, div.marketing-main {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}

/* Sticky footer: on short-content pages (Settings, My Trips with few
   trips) the footer would otherwise float right after the content
   instead of sitting at the viewport's actual bottom. main.marketing-main
   is the flexible middle -- everything above/below it (nav, hero,
   footer) keeps its natural height. */
.marketing-page-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.marketing-page-shell main.marketing-main {
  flex: 1;
}

/* Gap between the compact hero and the content below it on pages that
   don't use .landing-section (which already carries its own 100px of
   padding) -- Settings and My Trips' content sits directly in
   marketing-main instead, with nothing supplying that breathing room
   on its own. */
.marketing-hero--compact + main.marketing-main {
  padding-top: 48px;
}

/* ---------- Nav (identical structure/behavior to landing.html's,
   including the transparent-over-hero -> solid-on-scroll transition) ---------- */
.landing-nav {
  position: fixed;
  top: var(--offline-banner-height, 0px); left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px 20px 32px;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, top 0.2s ease;
}
.landing-nav.landing-nav--scrolled {
  background: var(--bg);
  box-shadow: 0 1px 0 var(--border);
}
/* Round 122t: the nav's own height, for a page that sits under it with no
   hero (Personalization: .profile-page--under-nav). Measured: 84px at
   desktop padding, 72px at the phone padding main.css sets under 430px. */
:root { --marketing-nav-h: 84px; }
.profile-page--under-nav { padding-top: var(--marketing-nav-h); }
.landing-nav.landing-nav--scrolled .wordmark,
.landing-nav.landing-nav--scrolled .nav-home-btn,
.landing-nav.landing-nav--scrolled .nav-search-toggle,
.landing-nav.landing-nav--scrolled .nav-link {
  color: var(--ink);
}
.landing-nav.landing-nav--scrolled .lang-btn {
  background-color: var(--bg-soft);
  border-color: var(--border);
  color: var(--ink);
}
.landing-nav.landing-nav--scrolled .lang-btn:hover {
  background-color: var(--border);
  border-color: var(--border);
}
.landing-nav .nav-home-btn,
.landing-nav .nav-search-toggle {
  color: var(--on-ink);
}
.landing-nav .wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  color: var(--on-ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.landing-nav-cta {
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav-link {
  color: var(--on-ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.btn-vivid {
  /* Round 122w: inline-FLEX, centred. Round 122j gave every .btn-vivid a
     44px min-height for touch (main.css), but as an inline-block the extra
     height all went BELOW the label -- "Continue planning" sat 3px high on
     a desktop and 6.5px high on a phone, the founder's report. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 100px;
  text-decoration: none;
  transition: background var(--duration-quick) var(--ease-warm),
              transform var(--duration-quick) var(--ease-warm),
              box-shadow var(--duration-quick) var(--ease-warm);
}
.btn-vivid:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.35);
}

/* Guest dropdown: shown instead of the plain "Log In" nav-link for a
   logged-out visitor -- same 36px circular position/shape as the real
   profile-dropdown-trigger (main.css), so the nav's overall rhythm
   (CTA button -> avatar-shaped element) stays consistent whether
   signed in or not, rather than "Log In" appearing to take the
   avatar's place as plain text. Reuses .profile-dropdown-menu/-item
   from main.css for the menu itself -- only the trigger needs its own,
   deliberately muted (not the colored gradient) style. */
.guest-dropdown {
  position: relative;
}
.guest-dropdown-trigger {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.12);
  color: var(--on-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, box-shadow 0.15s;
}
.landing-nav.landing-nav--scrolled .guest-dropdown-trigger {
  border-color: var(--border);
  color: var(--muted);
}
.guest-dropdown-trigger:hover,
.guest-dropdown-trigger[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.2);
}
.landing-nav.landing-nav--scrolled .guest-dropdown-trigger:hover,
.landing-nav.landing-nav--scrolled .guest-dropdown-trigger[aria-expanded="true"] {
  background: var(--bg-soft);
}

/* ---------- Marketing hero: a simpler, static alternative to
   landing.html's photo-rotating .hero -- solid brand-gradient
   background, gradient-accent headline, no carousel machinery. ---------- */
.marketing-hero {
  position: relative;
  padding: 160px 24px 90px;
  text-align: center;
  background: linear-gradient(160deg, var(--ink) 0%, #1E1B4B 55%, #3B1667 100%);
  overflow: hidden;
}
.marketing-hero::after {
  /* Same violet-to-fuchsia energy as .closing-cta, at low opacity as a
     soft glow rather than the full, saturated surface -- this is an
     entrance, not the highest-energy moment on the page. */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(var(--accent-rgb), 0.35), transparent 70%);
  pointer-events: none;
}
.marketing-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}
.marketing-eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-bright, var(--accent-bright));
  margin-bottom: 18px;
}
.marketing-hero-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--on-ink);
  margin: 0 0 20px;
}
.marketing-hero-sub {
  color: var(--on-ink-muted);
  font-size: 17px;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

/* Compact variant: just a page title banner for functional/utility
   pages (Settings, My Trips) that don't need the fuller multi-line
   copy About/Contact use -- same brand treatment, shorter and with no
   room reserved for a subhead. */
.marketing-hero--compact {
  padding: 130px 24px 40px;
}
.marketing-hero--compact .marketing-hero-headline {
  font-size: clamp(28px, 4vw, 38px);
  margin: 0;
}

.marketing-hero-intro {
  text-align: left;
  margin: 36px 0 0;
}
.marketing-hero-intro p {
  color: var(--on-ink-muted);
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0 0 18px;
}
.marketing-hero-intro p:last-child { margin-bottom: 0; }

.marketing-hero .btn-cta-white {
  display: inline-block;
  margin-top: 32px;
}

/* ---------- Section rhythm (identical to landing.html's) ---------- */
.landing-section {
  padding: 100px 0;
  border-bottom: 1px solid var(--border);
}
.landing-section:last-child { border-bottom: none; }
.section-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-ink);
  background: var(--accent-bg-soft);
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 16px;
}
.section-heading {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
  max-width: 560px;
}
.section-heading.center { max-width: none; margin-left: auto; margin-right: auto; }
.section-sub {
  color: var(--muted);
  font-size: 15px;
  max-width: 560px;
  margin: 0 0 40px;
  line-height: 1.6;
}
.section-sub.center { max-width: 600px; margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Pillar grid: a feature-card pattern adapted from
   landing.html's .step-grid/.step-card (3-up "How it works" steps),
   generalized to any number of cards and without the numbered-step
   ordinal, for presenting a set of parallel ideas rather than a
   sequence. ---------- */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.pillar-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px 26px;
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-quick) var(--ease-warm),
              box-shadow var(--duration-quick) var(--ease-warm),
              border-color var(--duration-quick) var(--ease-warm);
}
.pillar-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(var(--shadow-ink), 0.1);
  border-color: rgba(var(--accent-rgb), 0.45);
}
.pillar-icon {
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent-dark, var(--accent)) 0%, var(--accent) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.28);
}
.pillar-card h3 {
  font-family: var(--font-display);
  font-size: 17px;
  margin: 0 0 8px;
  color: var(--ink);
}
.pillar-card p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

/* ---------- Closing CTA (identical to landing.html's) ---------- */
.closing-cta {
  background: linear-gradient(120deg, var(--accent-deep) 0%, var(--accent) 55%, #EC4899 100%);
  text-align: center;
  padding: 80px 24px;
}
.closing-cta h2 {
  font-family: var(--font-display);
  color: var(--on-ink);
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 12px;
}
.closing-cta p {
  color: var(--on-ink-muted);
  font-size: 15px;
  margin: 0 0 32px;
}
.btn-cta-white {
  display: inline-block;
  background: #fff;
  color: var(--accent);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 30px;
  border-radius: 100px;
  text-decoration: none;
}
.btn-cta-white:hover { opacity: 0.92; }

/* ---------- FAQ (identical to landing.html's) ---------- */
.faq-list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-tagline {
  max-width: 720px;
  margin: 28px auto 0;
  text-align: center;
  color: var(--accent);
  font-weight: 600;
  font-size: 15px;
}
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
}
.faq-chevron {
  flex-shrink: 0;
  color: var(--muted);
  transition: transform 0.25s var(--ease-warm);
}
.faq-question[aria-expanded="true"] .faq-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}
.faq-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s var(--ease-warm);
}
.faq-question[aria-expanded="true"] + .faq-answer-wrap {
  grid-template-rows: 1fr;
}
.faq-answer {
  overflow: hidden;
  margin: 0;
  padding: 0 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
.faq-question[aria-expanded="true"] + .faq-answer-wrap .faq-answer {
  padding-bottom: 20px;
}


@media (max-width: 640px) {
  .marketing-hero { padding: 130px 20px 70px; }
  .landing-section { padding: 64px 0; }
  .section-heading { font-size: 28px; }
  .pillar-grid { grid-template-columns: 1fr; }

  /* Round 74, founder: "the continue planning button size is not correct
     in the myTrips page in mobile version ... ensure that size of this
     button is consistent".
     It was measured at 52px tall here against 31px on the landing page,
     because landing.css has a mobile nav block and this file had none --
     so every marketing-theme page (My Trips, About, Contact, Settings)
     kept full desktop padding and font on a phone, and "Continue
     planning" (the signed-in label, visibly longer than "Get Started")
     broke onto a second line inside the pill.
     These numbers are landing.css's, deliberately -- the point is that
     the same button is the same size on every page, so copying the
     values beats inventing a third set. Change them in both files or
     neither. */
  .landing-nav { padding: 14px 16px; }
  .landing-nav-cta { gap: 10px; }
  .btn-vivid { padding: 8px 14px; font-size: 13px; }
  .landing-nav .wordmark,
  .landing-nav .btn-vivid {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* 375pt -- iPhone SE/6s/7/8, and the narrowest screen the app's own iOS
   15 target still reaches. Mirrors landing.css. */
/* Round 122n widened this from 380 to 430: the language picker is on
   every nav now, and signed in at 393px (mark, home, language, "Continue
   planning", avatar) the row needed 390 inside 378 -- the avatar was
   clipped on every page but the landing one, which hides Home at the
   top. The tighter padding and gap give back 14px; measured 376 after. */
@media (max-width: 430px) {
  .landing-nav { padding: 14px 12px; }
  :root { --marketing-nav-h: 72px; }
  .landing-nav-cta { gap: 8px; }
  .btn-vivid { padding: 8px 10px; font-size: 12.5px; }
}
/* 375pt is the real floor -- iPhone SE (both modern ones), 6s, 7 and 8,
   and the oldest device this app's iOS 15 deployment target still
   reaches. 18px less than the 393 above was checked at, and that nav
   has no slack at 393. */
@media (max-width: 380px) {
  .landing-nav { padding: 14px 10px; }
  .landing-nav-cta { gap: 6px; }
}

/* 21 Oct 2026: the About page's paragraphs sit below the hero on the page's own background, as the app's About does
   (they used to run inside the dark hero photo). The hero keeps its eyebrow, headline, one line and the button. */
.about-intro {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 0 8px;
}
.about-intro p {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 18px;
}
.about-intro p:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  .about-intro { padding-top: 32px; }
  .about-intro p { font-size: 16px; }
}

/* 21 Oct 2026: About's FAQ is the last section before the footer -- it keeps the section rule the footer sits
   under (as every other page's content ends with an edge), without the landing page's 100px tail or its tagline
   (the footer says "Your journey, simplified." itself). */
.about-faq { padding-bottom: 40px; border-bottom: none; }