/* TripSanity marketing landing — implements the Aug 2026 design handoff
   (design_handoff_tripsanity_landing). Landing-only stylesheet: app pages keep
   base.css/site.css. Tokens + values follow the handoff README exactly. */

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/assets/fonts/figtree-var.woff2') format('woff2');
}

:root {
  --navy: #1A2838;
  --navy-deep: #14202D;
  --navy-mid: #22344a;
  --navy-shadow: #0d161f;
  --mist: #F5F7FA;
  --white: #FFFFFF;
  --orange: #F2A03D;
  --orange-hover: #ffb257;
  /* orange as TEXT on white or mist: --orange is 2.1:1 there, this is 5:1 (audit J20) */
  --orange-ink: #AD5A00;
  --blue: #3C75A4;
  --green-ok: #2f8f5b;
  --green-ok-dark: #2fbb72;
  --green-recap: #17503a;
  --err: #CE2029;
  --hairline: rgba(26, 40, 56, 0.1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* In-page jumps (#start, #how…) stop below the sticky header instead of under it — it used to
   cover the email field on "Create a trip", leaving only the button in view. */
html { scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--mist); color: var(--navy);
  font-family: Figtree, "Helvetica Neue", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--navy); }
h1, h2, h3, p { margin: 0; }
.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

.eyebrow {
  font-size: .875rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- header ---------- */
/* glass (Oct 2026): the header is a pane over whatever scrolls under it — the hero's navy, a card's white */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245, 247, 250, 0.8);
  -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7);   /* the app's values (base.css --glass-blur) */
  border-bottom: 1px solid rgba(26, 40, 56, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
@media (prefers-reduced-transparency: reduce) { .topbar { background: var(--mist); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.topbar .row { display: flex; align-items: center; gap: 28px; padding: 14px 24px; max-width: 1160px; margin: 0 auto; }
.topbar img { height: 34px; width: auto; display: block; }
.topbar nav { display: flex; gap: 26px; margin-left: auto; align-items: center; font-size: .9688rem; font-weight: 600; }
.pill-cta {
  background: var(--orange); color: var(--navy); padding: 11px 20px;
  border-radius: 10px; font-weight: 800;
  /* one line, always: since "Sign in" joined it at 360px+ it wrapped to "Create a / trip"
     and grew the header from 64px to 83px on 360–388px phones (Sept 29 2026) */
  white-space: nowrap;
}
.pill-cta:hover { background: var(--orange-hover); color: var(--navy); }
/* the demo, one click from the header on every scroll position — the quieter twin of the pill */
.nav-demo {
  border: 2px solid rgba(26, 40, 56, 0.75); color: var(--navy); padding: 9px 16px;
  border-radius: 10px; font-weight: 800; white-space: nowrap;
}
.nav-demo:hover { border-color: var(--orange); background: rgba(242, 160, 61, 0.14); color: var(--navy); }

/* ---------- hero ---------- */
.hero {
  background: linear-gradient(180deg, #14202D 0%, #1A2838 62%, #22344a 100%);
  color: var(--mist); padding: 76px 24px 96px;
  /* isolate + the z-index:-1 layers below: the art paints above this gradient but
     under the hero's own content, with no z-index needed on .grid */
  position: relative; isolation: isolate; overflow: hidden;
}
/* The hero was flat navy for its first month. This is the horizon that goes behind
   it: a low skyline with a dotted route threading between waypoint cards — the whole
   product idea at atmosphere strength, never competing with the headline. Purely
   decorative: the gradient above is still the real background, so a failed image
   request costs the picture and nothing else. */
.hero::before,
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* Laptop and up only: below 769px the copy and the phone mock stack, the mock covers the band
   and only slivers showed at the edges — yet every phone downloaded the 2048px JPEG (audit J19,
   Oct 9 2026). Inside the media query the browser never requests it. */
@media (min-width: 769px) {
  .hero::before {
    background: url('/assets/hero-horizon.jpg') no-repeat center bottom 230px;
    background-size: 100% auto;
    /* Bottom-anchored, the horizon landed ~940px down and no laptop ever saw it. The
       230px lift puts the skyline at the fold instead. Its top edge now falls mid-hero,
       so fade that edge out rather than showing a seam. */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34%);
    mask-image: linear-gradient(180deg, transparent 0, #000 34%);
  }
}
.hero::after {
  /* Two jobs. The horizontal one keeps the white headline, mist lede and orange kicker
     at full contrast where the copy column crosses the art. Its stops are calc()'d off
     50% rather than set in percentages because .grid is a centred 1160px container —
     percentage stops track the viewport, so on a 1920 screen they slid left and left
     the dotted route running through the lede. The vertical one darkens the hero's last
     200px, which is what hides the lifted band's hard bottom edge — drop it and a seam
     appears straight across the hero above the proof strip. */
  background:
    linear-gradient(90deg,
      rgba(20, 32, 45, 0.97) 0,
      rgba(20, 32, 45, 0.95) calc(50% - 120px),
      rgba(20, 32, 45, 0.3) calc(50% + 160px),
      rgba(20, 32, 45, 0) calc(50% + 520px)),
    linear-gradient(180deg,
      rgba(13, 22, 31, 0) 74%, rgba(13, 22, 31, 0.5) 88%, rgba(13, 22, 31, 0.72) 100%);
}
/* readability beats decoration — drop the art entirely when the viewer asks for it */
@media (prefers-contrast: more) {
  .hero::before { display: none; }
}
/* Three areas, not two columns: the headline, the phone and the rest. On a laptop the phone
   spans both rows beside the copy; below 769px it drops between the headline and the lede so the
   product is on the first screen (Oct 14 2026). */
.hero .grid {
  max-width: 1160px; margin: 0 auto; display: grid;
  grid-template-columns: 1fr 1fr; grid-template-areas: "head phone" "rest phone";
  gap: 0 56px; align-items: start;
}
.hero-head { grid-area: head; }
.hero .phone-wrap { grid-area: phone; padding-top: 18px; }   /* room for the "Live demo" tag */
.hero-rest { grid-area: rest; }
.hero-pill {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid rgba(242, 160, 61, 0.5); background: rgba(242, 160, 61, 0.12);
  color: var(--orange); padding: 7px 14px; border-radius: 7px;
  font-size: .875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.hero h1 {
  font-size: 4.25rem; line-height: 1.02; letter-spacing: -0.03em; font-weight: 900;
  margin-top: 22px; text-wrap: balance;
}
.hero .kicker {
  font-size: 1.875rem; line-height: 1.2; font-weight: 700; color: var(--orange);
  margin-top: 14px; letter-spacing: -0.01em;
}
.hero .lede {
  font-size: 1.1875rem; line-height: 1.55; color: rgba(245, 247, 250, 0.82);
  max-width: 520px; margin-top: 22px; text-wrap: pretty;
}
/* the rest of the page leans hard on "family" — this keeps every other kind of
   group from deciding at the fold that the app isn't for them */
.hero-notjust { margin-top: 24px; max-width: 520px; }
.hero-notjust b {
  display: block; color: var(--orange); font-size: .9688rem; font-weight: 800; letter-spacing: 0.02em;
}
/* "Try the live demo" — a real button straight under the lede, so it's in the first screen on a
   laptop and a phone. Outlined, not orange: the email form's button stays the one loud thing. */
.hero-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 26px; max-width: 520px; }
.demo-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 12px;
  border: 2px solid rgba(245, 247, 250, 0.6); background: rgba(245, 247, 250, 0.06);
  color: var(--mist); font-size: 1.0938rem; font-weight: 800; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.demo-btn svg { width: 12px; height: 12px; fill: var(--orange); flex: 0 0 auto; }
.demo-btn:hover, .demo-btn:focus-visible { border-color: var(--orange); background: rgba(245, 247, 250, 0.13); color: var(--white); }
.hero-demo span { font-size: .9375rem; color: rgba(245, 247, 250, 0.7); }
.tt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tt-chips span, .tt-chips a {
  font-size: .875rem; font-weight: 600; color: rgba(245, 247, 250, 0.8);
  border: 1px solid rgba(245, 247, 250, 0.22); background: rgba(245, 247, 250, 0.06);
  padding: 9px 13px; border-radius: 10px;   /* 37px tall, was 29 (audit J20 tap targets) */
}
.tt-chips a { text-decoration: none; transition: background .15s, border-color .15s; position: relative; }
.tt-chips a::after { content: ""; position: absolute; inset: -4px 0; }   /* +4px each way = the 8px row gap */
.tt-chips a:hover, .tt-chips a:focus-visible {
  color: var(--mist); border-color: var(--orange); background: rgba(245, 247, 250, 0.12);
}
.signup { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; max-width: 520px; }
.signup input {
  flex: 1 1 260px; min-width: 0; background: var(--mist); border: 2px solid var(--mist);
  color: var(--navy); font-family: inherit; font-size: 1.0938rem; font-weight: 600;
  padding: 16px 18px; border-radius: 12px; outline: none;
}
.signup input:focus-visible { border-color: var(--orange); }
.signup button {
  background: var(--orange); color: var(--navy); border: none; font-family: inherit;
  font-size: 1.0938rem; font-weight: 800; padding: 16px 26px; border-radius: 12px; cursor: pointer;
}
.signup button:hover:not(:disabled) { background: var(--orange-hover); }
.signup button:focus-visible { outline: 2px solid var(--mist); outline-offset: 2px; }
.signup button:disabled { opacity: 0.7; cursor: default; }
.form-note { font-size: .9688rem; color: rgba(245, 247, 250, 0.6); margin-top: 12px; }
/* "keep me posted" checkbox under the sign-in forms (migration 0048) — off by default */
.optin { display: flex; align-items: flex-start; gap: 9px; max-width: 520px; margin-top: 12px;
  font-size: .9063rem; line-height: 1.45; color: rgba(245, 247, 250, 0.75); cursor: pointer; }
.optin input { margin: 3px 0 0; width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--orange); cursor: pointer; }
.final .optin { color: var(--navy); }
/* A visible label, not just a placeholder (gone the moment you type) — it spans the form's
   first row so the field and button keep theirs. */
.signup .field-label {
  flex: 0 0 100%; margin-bottom: -4px;
  font-size: .9375rem; font-weight: 700; color: rgba(245, 247, 250, 0.85);
}
.final .signup .field-label { color: var(--navy); }
/* what it costs, in one line, under the form that starts it */
.plan-line { font-size: .9375rem; font-weight: 600; color: rgba(245, 247, 250, 0.85); margin-top: 12px; }
.plan-line b { color: var(--orange); font-weight: 800; }
.plan-line span { white-space: nowrap; }   /* on a narrow phone it breaks between phrases, not inside one */
.plan-line a { color: var(--mist); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.plan-line a:hover { color: var(--orange); }
/* a buyer back from Stripe with no session here (the paywall's success redirect) */
.paid-note {
  background: rgba(47, 143, 91, 0.2); border: 1px solid rgba(47, 187, 114, 0.6);
  border-radius: 12px; padding: 10px 14px; font-size: .9688rem; font-weight: 600;
  margin-top: 26px; max-width: 520px;
}
.paid-note:not([hidden]) + .signup { margin-top: 16px; }   /* only while it shows — hidden, the form keeps its own spacing */
.form-err { font-size: .9375rem; font-weight: 600; color: #ff9d94; margin-top: 10px; min-height: 18px; }
/* under the code form: "Send a new code" (60 s countdown) and "Wrong address? Edit email" */
.code-more { display: flex; flex-wrap: wrap; gap: 0 22px; max-width: 520px; margin-top: 4px; }
.code-more button {
  background: none; border: none; padding: 0; min-height: 44px; cursor: pointer;
  font: inherit; font-size: .9688rem; font-weight: 700; color: var(--mist);
  text-decoration: underline; text-underline-offset: 2px;
}
.code-more button:hover:not(:disabled) { color: var(--orange); }
.code-more button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.code-more button:disabled { cursor: default; text-decoration: none; color: rgba(245, 247, 250, 0.72); font-variant-numeric: tabular-nums; }
/* "Had trips with us before?" — a way back for returning organizers, deliberately quieter than
   the primary button it sits above: it was the same bold orange, two lines long on a phone, and
   it touched the chip row (Sept 29 2026). The header's "Sign in" is the loud one. */
.returning { font-size: .9375rem; color: rgba(245, 247, 250, 0.7); margin: 26px 0 -10px; }
.returning a { color: var(--mist); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.returning a:hover { color: var(--orange); }
.final .returning { color: var(--navy); margin: 14px 0 0; }   /* 7:1 on the orange; the .75 tint was 4.3:1 */
.final .returning a { color: var(--navy); text-decoration: underline; }
/* a returning guest: the trips this phone has opened, one tap each — first thing in the hero,
   since it only ever shows on a phone that has been here before */
.onphone {
  margin: 0 0 28px; max-width: 520px; font-size: .9688rem; color: rgba(245, 247, 250, 0.85);
  background: rgba(245, 247, 250, 0.06); border: 1px solid rgba(245, 247, 250, 0.14);
  border-radius: 14px; padding: 12px 14px;
}
.onphone b { color: var(--mist); }
.onphone a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 8px;
  padding: 10px 12px; border-radius: 10px; background: rgba(245, 247, 250, 0.08);
  color: var(--mist); text-decoration: none; font-weight: 800;
}
.onphone a:hover { background: rgba(245, 247, 250, 0.14); }
.onphone a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onphone a small { flex: 0 0 auto; font-weight: 600; color: rgba(245, 247, 250, 0.6); }
.onphone a::after { content: "→"; color: var(--orange); margin-left: 4px; }
.invite-aside {
  font-size: .9688rem; color: rgba(245, 247, 250, 0.72); margin-top: 20px;
  border-left: 3px solid var(--blue); padding-left: 14px;
}
/* --blue on the hero gradient was 2.6–3.4:1; this is 6.6:1 at the lightest stop (WCAG AA 4.5) */
.invite-aside a { color: #8FC1EA; text-decoration: underline; text-underline-offset: 2px; }
.invite-aside a:hover { color: var(--mist); }
.signed-in {
  margin-top: 32px; font-size: 1.0938rem; font-weight: 700; line-height: 1.6;
}
.signed-in a { color: var(--orange); font-weight: 800; }
.signed-in a:hover { color: var(--orange-hover); }
.auth-warn {
  background: rgba(206, 32, 41, 0.18); border: 1px solid rgba(255, 157, 148, 0.55);
  border-radius: 12px; padding: 10px 14px; font-size: .9375rem; margin-top: 24px; max-width: 520px;
}

/* hero phone mockup */
.phone-wrap { display: flex; justify-content: center; }
.phone {
  position: relative;   /* the bottom bar floats over the screen (.p-bar) */
  width: 330px; max-width: 100%; border: 11px solid var(--navy-shadow); border-radius: 42px;
  background: var(--mist); box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45);
  overflow: hidden; isolation: isolate;
  /* Its own compositing layer (Eric's Safari, Oct 15 2026): with the frame composited, WebKit clips
     the screens with a rounded mask on the frame's own layer. Left to paint-time clipping, Safari
     gave each animated screen a per-child clip that came out square after the loop's first swap
     and only came right on the next unrelated repaint (hover). The ::after ring below is also
     promoted so it always sits above the screen layers rather than wherever a stale overlap
     pass left it. */
  will-change: transform;
  color: var(--navy); /* the mock is a light surface inside the dark hero — don't inherit mist text */
}
/* Safari drops overflow's rounded clip once a screen's animation puts the content on its own
   compositing layer (the hero loop, Oct 2026): after the first screen change the mist screen
   showed square corners inside the frame's bottom curve (Eric, Oct 15). So the frame's inner
   corners are painted on top of the screen instead of relying on the clip: a ring in the frame's
   colour, exactly the border's width, over the padding box. Its outer edge (31 + 11 = 42px) is the
   frame's own outline, so wherever the clip does work it changes nothing. Chrome never lost the
   clip; this is for WebKit. */
.phone::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: 31px;   /* the frame's inner radius: 42px outer − 11px border */
  box-shadow: 0 0 0 11px var(--navy-shadow);
  will-change: transform;
}
/* ...and the screen's own corners are rounded to the same radius: a square corner sits just outside
   the frame's outline, where no cover can reach it, and showed as a light speck when the clip went. */
.phone .p-head { border-radius: 31px 31px 0 0; }
.phone .p-screens { border-radius: 0 0 31px 31px; }
/* The whole mock is a link into the demo. The float moved from .phone to the link so the
   "Live demo" tag rides with the phone instead of hanging in the air above it. */
.phone-link {
  position: relative; display: block; max-width: 100%; color: inherit; border-radius: 42px;
  animation: tsFloat 7s ease-in-out infinite;
}
.phone-link:hover { color: inherit; }
.phone-link:hover .phone, .phone-link:focus-visible .phone { box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45), 0 0 0 3px var(--orange); }
.phone-link:focus-visible { outline: none; }
.phone-tag {
  position: absolute; top: -17px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: var(--orange); color: var(--navy); padding: 8px 15px; border-radius: 7px;
  font-size: .8125rem; font-weight: 800; letter-spacing: 0.04em;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
.phone-tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--navy); animation: tsPulse 1.8s ease-in-out infinite; }
@keyframes tsFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes tsPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .phone-link, .phone-tag i { animation: none; } }
.phone .p-head { background: var(--navy); color: var(--mist); padding: 16px 16px 12px; }
.phone .p-status { font-size: .8125rem; color: rgba(245, 247, 250, 0.55); margin-bottom: 10px; }
.phone .p-title { font-size: 1.3125rem; font-weight: 800; letter-spacing: -0.01em; }
.phone .p-sub { font-size: .8125rem; color: rgba(245, 247, 250, 0.6); margin-top: 4px; }
.phone .p-chips { display: flex; gap: 8px; margin-top: 12px; font-size: .75rem; font-weight: 700; }
.phone .p-chips span { background: rgba(245, 247, 250, 0.1); border-radius: 8px; padding: 7px 9px; }
.phone .p-chips .hot { background: var(--orange); color: var(--navy); }
.phone .p-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.phone .p-day {
  font-size: .875rem; font-weight: 800; color: var(--blue);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.p-stop {
  background: var(--white); border: 1px solid var(--hairline);
  border-radius: 14px; padding: 12px; display: flex; gap: 10px; position: relative;
}
.p-stop.next { border-color: rgba(242, 160, 61, 0.55); box-shadow: 0 0 0 3px rgba(242, 160, 61, 0.14); }
.p-stop .p-ic {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--blue-soft, #8FB9DC); color: var(--blue);
  display: flex; align-items: center; justify-content: center; font-size: .9375rem; margin-top: 2px;
}
.p-stop.pdone .p-ic { background: var(--green-ok); border-color: var(--green-ok); color: #fff; }
.p-stop.pdone .name { text-decoration: line-through; color: rgba(26, 40, 56, 0.45); }
.p-stop .p-m { flex: 1; min-width: 0; }
.p-stop .p-next {
  position: absolute; top: -9px; right: 10px; background: var(--orange); color: var(--navy);
  font-size: .7188rem; font-weight: 700; letter-spacing: 0.05em; padding: 2px 9px; border-radius: 8px;
}
.p-stop .uic { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; }
.p-stop .t { display: flex; justify-content: space-between; font-size: .875rem; font-weight: 700; color: var(--blue); }
.p-stop.next .t { color: var(--orange); }
.p-stop .done { color: var(--green-ok); }
.p-stop .name { font-size: .9688rem; font-weight: 700; margin-top: 3px; }
.p-stop .note { font-size: .8125rem; color: rgba(26, 40, 56, 0.62); margin-top: 4px; line-height: 1.45; }
/* wraps: "Rideshare" (the live card's word) no longer fits beside Maps and Wear on one line */
.p-stop .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; font-size: .75rem; font-weight: 700; }
.p-stop .chips span {
  background: var(--mist); border: 1px solid rgba(26, 40, 56, 0.12);
  border-radius: 7px; padding: 5px 10px; display: inline-flex; align-items: center; gap: 4px;
}
/* the app's bottom bar, Trip Info raised in the middle (trip.css .troom / .troom.mid). Since the
   Liquid Glass pass (Oct 2026) it floats: a translucent capsule inset from the screen's edges,
   the screen scrolling under it — the mock mirrors the app's .tbar. z-index makes it a stacking
   context so the lit tab's lozenge (::before, z -1) paints above the bar and under the icon. */
.phone .p-bar {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2;
  display: flex; align-items: flex-end; border-radius: 18px;
  background: rgba(20, 32, 45, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 22px rgba(0, 0, 0, 0.4);
  padding: 7px 8px 8px; color: rgba(245, 247, 250, 0.6);
}
.p-bar span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .6875rem; }
.p-bar b { font-weight: 700; }
.p-bar .uic { width: 18px; height: 18px; fill: currentColor; }
.p-bar .on, .p-bar .mid { color: var(--mist); }
.p-bar .mid i {
  width: 40px; height: 40px; margin-top: -24px; border-radius: 50%;
  background: var(--orange); border: 3px solid var(--navy-deep);
  box-shadow: 0 0 0 2px rgba(242, 160, 61, 0.4);   /* orange disc: the navy pin mark disappears on a navy one */
  display: flex; align-items: center; justify-content: center;
}
.p-bar .mid img { height: 20px; width: auto; display: block; }

/* ---------- hero loop: four screens in the one phone (Oct 14 2026) ----------
   The screens stack inside .p-screens; data-i on .loop picks one, and the finished state of
   every screen is the base CSS — each animation only supplies its "from", so prefers-reduced-motion
   (animation: none below) shows the end state, never a half-told story. */
.loop { position: relative; max-width: 100%; }
.loop .phone-link { margin: 0 auto; width: 330px; }
/* 304px of screen plus the room the floating bar covers (its content keeps the same height as before) */
.phone .p-screens { position: relative; height: 366px; padding-bottom: 62px; overflow: hidden; background: var(--mist); }
.phone .p-screens .p-body { display: none; animation: loopIn .32s ease-out both; }
.loop[data-i="0"] .p-plans, .loop[data-i="1"] .p-find,
.loop[data-i="2"] .p-money, .loop[data-i="3"] .p-photos { display: flex; }
@keyframes loopIn { from { opacity: 0; transform: translateY(6px); } }
/* bottom bar: the lit tab follows the screen */
.p-bar span { position: relative; }
.loop[data-i="0"] .p-bar .b0, .loop[data-i="1"] .p-bar .b3,
.loop[data-i="2"] .p-bar .b4, .loop[data-i="3"] .p-bar .b1 { color: var(--mist); }
.loop[data-i="0"] .p-bar .b0::before, .loop[data-i="1"] .p-bar .b3::before,
.loop[data-i="2"] .p-bar .b4::before, .loop[data-i="3"] .p-bar .b1::before {
  content: ""; position: absolute; top: -5px; left: 12%; right: 12%; height: 28px; border-radius: 8px; z-index: -1;
  background: rgba(242, 160, 61, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
/* Plans: the first stop gets checked off while you watch, then NEXT UP moves on */
.p-plans .p-stop.pdone .p-ic { animation: pCheck .35s 1.1s both; }
@keyframes pCheck { from { background: transparent; border-color: var(--blue-soft, #8FB9DC); color: var(--blue); transform: scale(.9); } 60% { transform: scale(1.12); } }
.p-plans .p-stop.pdone .name { position: relative; text-decoration: none; animation: pDim .3s 1.2s both; }
.p-plans .p-stop.pdone .name::after {
  content: ""; position: absolute; left: 0; right: 0; top: 52%; height: 2px; background: currentColor;
  transform-origin: left center; animation: pStrike .35s 1.2s both;
}
@keyframes pDim { from { color: var(--navy); } }
@keyframes pStrike { from { transform: scaleX(0); } }
.p-plans .p-stop .done { animation: pFade .3s 1.35s both; }
.p-plans .p-stop .p-next { animation: pPop .4s 1.7s both; }
@keyframes pFade { from { opacity: 0; } }
@keyframes pPop { from { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.08); } }
/* shared bits */
.p-fhead { display: flex; align-items: baseline; justify-content: space-between; font-size: 1.0625rem; font-weight: 800; }
.p-fhead span { font-size: .75rem; font-weight: 700; color: rgba(26, 40, 56, 0.55); }
.p-fnote { font-size: .8125rem; line-height: 1.4; color: rgba(26, 40, 56, 0.62); }
/* Find: a map with the family on it. Streets are repeating gradients, the park and the lake are
   two blobs — enough to read as a map at 300px without a tile request. */
.p-map {
  position: relative; height: 196px; border-radius: 14px; overflow: hidden; border: 1px solid var(--hairline);
  background:
    repeating-linear-gradient(90deg, transparent 0 44px, #fff 44px 49px),
    repeating-linear-gradient(0deg, transparent 0 36px, #fff 36px 41px),
    #e4eaef;
}
.p-map .p-ave { position: absolute; left: -10%; top: 46%; width: 120%; height: 9px; background: #fff; transform: rotate(-14deg); }
.p-map .p-park { position: absolute; left: 6%; bottom: 8%; width: 34%; height: 34%; border-radius: 10px; background: #cfe6cc; }
.p-map .p-water { position: absolute; right: -12%; top: -8%; width: 30%; height: 125%; border-radius: 40% 0 0 40%; background: #bcd7ea; }
.p-pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.p-pin b {
  width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 2px solid var(--blue);
  display: flex; align-items: center; justify-content: center; font-size: 1.0625rem; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
.p-pin em { font-style: normal; font-size: .6875rem; font-weight: 800; color: var(--navy); background: rgba(255, 255, 255, 0.92); padding: 2px 7px; border-radius: 7px; white-space: nowrap; }
.p-pin.pin-e b { border-color: var(--orange); }
.p-pin.pin-e::after { content: ""; position: absolute; top: 17px; left: 50%; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--orange); transform: translate(-50%, -50%); animation: pRing 1.8s ease-out infinite; }
@keyframes pRing { from { transform: translate(-50%, -50%) scale(1); opacity: .9; } to { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } }
.p-pin.pin-j { animation: pWalk 2.2s .4s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes pWalk { from { left: 82%; top: 66%; } }
.p-pin.pin-j em { animation: pFade .3s 2.4s both; }
.p-find .p-fnote { animation: pFade .3s 2.5s both; }
/* Money */
.p-tiles { display: flex; gap: 8px; }
.p-tiles div { flex: 1; background: var(--white); border: 1px solid var(--hairline); border-radius: 12px; padding: 9px 11px; }
.p-tiles small { display: block; font-size: .6875rem; font-weight: 700; color: rgba(26, 40, 56, 0.55); }
.p-tiles b { font-size: 1.125rem; font-weight: 800; }
.p-money .p-day { margin-top: 2px; }
.p-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--white); border: 1px solid var(--hairline); border-radius: 12px; padding: 9px 12px;
  font-size: .875rem; font-weight: 700; animation: loopIn .3s both;
}
.p-row { animation-delay: .5s; }
.p-row + .p-row { animation-delay: .8s; }
.p-row i { font-style: normal; color: rgba(26, 40, 56, 0.45); padding: 0 2px; }
.p-row > span:first-child { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-row b { font-weight: 800; }
.p-act { position: relative; display: inline-flex; }
.p-row em { font-style: normal; font-size: .75rem; font-weight: 800; padding: 4px 10px; border-radius: 7px; white-space: nowrap; }
.p-row em.mp { background: var(--mist); border: 1px solid rgba(26, 40, 56, 0.14); }
/* the first row settles while you watch: "Paid" is the resting state, "Mark paid" only the "from" */
.p-row em.pd { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--green-ok); color: #fff; animation: pSwap .3s 1.9s both; }
.p-row.settles em.mp { opacity: 0; animation: pSwapOut .3s 1.9s both; }
@keyframes pSwap { from { opacity: 0; transform: translateY(4px); } }
@keyframes pSwapOut { from { opacity: 1; } }
.p-money .p-fnote { animation: pFade .3s 2.3s both; }
/* Photos */
.p-post { background: var(--white); border: 1px solid var(--hairline); border-radius: 14px; padding: 10px 12px; animation: loopIn .3s both; }
.p-post { animation-delay: .4s; }
.p-post + .p-post { animation-delay: 1.5s; }
.p-who { display: flex; align-items: center; gap: 7px; font-size: .8125rem; font-weight: 800; }
.p-who i { width: 26px; height: 26px; border-radius: 50%; background: var(--mist); border: 1px solid rgba(26, 40, 56, 0.12); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: .9375rem; }
.p-who span { font-weight: 600; color: rgba(26, 40, 56, 0.5); }
.p-txt { font-size: .875rem; line-height: 1.4; margin-top: 5px; }
.p-pic { display: block; width: 100%; height: auto; border-radius: 10px; margin-top: 8px; animation: pFade .5s .9s both; }
.p-compose { font-size: .875rem; color: rgba(26, 40, 56, 0.45); background: var(--white); border: 1px solid var(--hairline); border-radius: 10px; padding: 9px 14px; animation: pFade .3s 2.2s both; }
/* the tabs under the phone: real buttons, 40px tall; the bar inside the lit one is the clock */
.loop-nav { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.loop-nav button {
  position: relative; overflow: hidden; min-height: 40px; padding: 0 14px; border-radius: 10px;
  border: 1px solid rgba(245, 247, 250, 0.22); background: rgba(245, 247, 250, 0.07); color: rgba(245, 247, 250, 0.8);
  font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.loop-nav button i { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--orange); transform: scaleX(0); transform-origin: left center; }
.loop-nav button[aria-pressed="true"] { border-color: var(--orange); color: var(--white); background: rgba(242, 160, 61, 0.14); }
.loop.playing .loop-nav button[aria-pressed="true"] i { animation: loopClock 3s linear both; }
@keyframes loopClock { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.loop-nav button:hover { border-color: rgba(245, 247, 250, 0.5); color: var(--white); }
.loop-nav button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.loop-cap {
  margin: 12px auto 0; max-width: 340px; min-height: 2.9em; text-align: center;
  font-size: .9688rem; line-height: 1.45; color: rgba(245, 247, 250, 0.85); text-wrap: balance;
}
.loop-cap.swap { animation: pFade .35s both; }
@media (prefers-reduced-motion: reduce) {
  .loop *, .loop *::before, .loop *::after { animation: none !important; }
}

/* ---------- paste preview (Oct 14 2026) ----------
   The paste card sits under the lede (the lede says "paste the plan you already have"); the
   result draws into the hero phone above (js/paste-preview.js) and the card becomes the Save
   step. On a phone the card moves to sit right under the phone once there is a result. */
.pastecard {
  margin-top: 22px; max-width: 520px; padding: 14px 14px 12px; border-radius: 16px;
  background: rgba(245, 247, 250, 0.06); border: 1px solid rgba(245, 247, 250, 0.16);
}
.pastecard > label { display: block; font-size: .9375rem; line-height: 1.45; color: rgba(245, 247, 250, 0.8); }
.pastecard > label b { color: var(--mist); }
.pastecard textarea {
  display: block; width: 100%; margin-top: 10px; min-height: 104px; resize: vertical;
  background: var(--mist); color: var(--navy); border: 2px solid var(--mist); border-radius: 12px;
  padding: 12px 14px; font: inherit; font-size: 1rem; line-height: 1.4; outline: none;
}
.pastecard textarea:focus-visible { border-color: var(--orange); }
.pastecard textarea:disabled { opacity: .75; }
.pasterow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 10px; }
.pasterow button, .pv-actions .pv-save {
  background: var(--orange); color: var(--navy); border: none; font-family: inherit;
  font-size: 1.0313rem; font-weight: 800; padding: 13px 20px; border-radius: 12px; cursor: pointer;
}
.pasterow button:hover:not(:disabled), .pv-actions .pv-save:hover { background: var(--orange-hover); }
.pasterow button:focus-visible, .pv-actions .pv-save:focus-visible { outline: 2px solid var(--mist); outline-offset: 2px; }
.pasterow button:disabled { opacity: 0.7; cursor: default; }
.pasterow span, .pastecount { font-size: .875rem; line-height: 1.4; color: rgba(245, 247, 250, 0.65); }
.pastecount:empty { display: none; }
.pastecount { display: block; margin-top: 6px; }
.pasteerr { margin: 8px 0 0; font-size: .9375rem; font-weight: 600; line-height: 1.4; color: #ff9d94; }
.pasteerr:empty { display: none; }
.pasteerr a { color: var(--mist); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
/* the result: the same card, now the Save step */
.pv-result { border-color: rgba(242, 160, 61, 0.55); background: rgba(242, 160, 61, 0.1); }
.pv-head b { display: block; color: var(--white); font-size: 1.0625rem; font-weight: 800; }
.pv-head span { display: block; margin-top: 3px; font-size: .9063rem; color: rgba(245, 247, 250, 0.75); }
.pv-warn { margin-top: 8px; font-size: .875rem; line-height: 1.4; color: #ffd9a3; }
.pv-extra { margin-top: 8px; font-size: .9063rem; line-height: 1.4; color: rgba(245, 247, 250, 0.85); }
.pv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px; }
.pv-actions .linky {
  background: none; border: none; padding: 0; min-height: 44px; cursor: pointer;
  font: inherit; font-size: .9375rem; font-weight: 600; color: rgba(245, 247, 250, 0.75);
  text-decoration: underline; text-underline-offset: 2px;
}
.pv-actions .linky:hover { color: var(--mist); }
.pv-note { margin-top: 8px; font-size: .875rem; line-height: 1.45; color: rgba(245, 247, 250, 0.62); }
/* the phone while it shows the visitor's plan */
.loop.preview .loop-nav, .loop.preview .loop-cap { display: none; }
.loop.preview .phone-link { animation: none; cursor: default; }
.loop.preview .p-screens { height: 352px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.loop.preview .p-screens .p-body { display: flex; animation: none; }
.loop.preview .p-screens .p-body.swap { animation: loopIn .32s ease-out both; }
.pv-cap {
  margin: 14px auto 0; max-width: 340px; text-align: center;
  font-size: .9688rem; line-height: 1.45; color: rgba(245, 247, 250, 0.85); text-wrap: balance;
}
.phone .p-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.phone .p-chips::-webkit-scrollbar { display: none; }
.phone .p-chips button {
  flex: 0 0 auto; font: inherit; font-size: .75rem; font-weight: 700; cursor: pointer;
  background: rgba(245, 247, 250, 0.1); color: var(--mist); border: none; border-radius: 8px; padding: 7px 9px;
}
.phone .p-chips button.hot { background: var(--orange); color: var(--navy); }
.phone .p-chips button:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.phone .p-chips > span { flex: 0 0 auto; }
.phone .p-day small { font-size: .75rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: rgba(26, 40, 56, 0.55); }
.p-stop .p-ic.emo { border-color: rgba(26, 40, 56, 0.14); background: var(--white); font-size: 1rem; }
.p-stop .bdg {
  font-size: .6875rem; font-weight: 800; padding: 2px 7px; border-radius: 7px; white-space: nowrap;
  background: rgba(47, 143, 91, 0.12); color: var(--green-ok);
}
.p-stop .bdg.pend { background: rgba(242, 160, 61, 0.2); color: var(--orange-ink); }
.p-stop .bdg.opt { background: rgba(60, 117, 164, 0.12); color: var(--blue); }
.p-more { font-size: .8125rem; line-height: 1.4; color: rgba(26, 40, 56, 0.6); padding: 0 4px; }
.pv-day .p-stop .name { overflow-wrap: anywhere; }
@media (max-width: 768px) {
  /* under the phone, the result card is the next thing after the preview — .phone-wrap is a flex
     row (it centres the phone), so it must stack or the card lands beside the phone and the page
     pans sideways */
  .hero .phone-wrap { flex-direction: column; align-items: center; }
  .loop + .pastecard { width: 100%; max-width: 520px; margin: 22px auto 0; }
}

/* ---------- proof strip ---------- */
.proof { background: var(--white); border-bottom: 1px solid rgba(26, 40, 56, 0.08); padding: 30px 24px; }
.proof .grid {
  max-width: 1160px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 20px; text-align: center;
}
.proof b { display: block; font-size: .9688rem; font-weight: 800; }
/* .75, not .6: the lighter grey was 4.1:1 on white (audit J20) */
.proof span { font-size: .9375rem; color: rgba(26, 40, 56, 0.75); }
/* the two real trips link to their write-ups */
.proof span a { color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.proof span a:hover { color: var(--navy); }

/* ---------- what is (definitional block for search/AI extraction) ---------- */
.whatis { padding: 56px 24px 0; }
.whatis h2 { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.015em; }
.whatis p { font-size: 1.0938rem; line-height: 1.65; color: rgba(26, 40, 56, 0.75); margin-top: 10px; max-width: 760px; text-wrap: pretty; }

/* ---------- problem ---------- */
.problem { padding: 96px 24px; }
.problem .head { max-width: 780px; }
.problem .eyebrow { color: var(--blue); }
.problem h2 { font-size: 2.875rem; line-height: 1.06; letter-spacing: -0.025em; font-weight: 900; margin-top: 14px; text-wrap: balance; }
.quotes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 22px; margin-top: 44px;
}
.quote {
  background: var(--white); border: 1px solid var(--hairline);
  border-radius: 18px; padding: 26px;
}
.quote q {
  quotes: '"' '"';
  /* Georgia, not a 50 KB webfont for three lines far below the fold (audit J19). The trip
     page's Field Guide style still uses Source Serif 4 (trip.css). */
  font-family: Georgia, 'Times New Roman', serif; font-style: italic;
  font-size: 1.375rem; line-height: 1.35; display: block;
}
.quote p { font-size: .9688rem; line-height: 1.6; color: rgba(26, 40, 56, 0.68); margin-top: 14px; }
.problem .close {
  font-size: 1.375rem; line-height: 1.45; font-weight: 700;
  max-width: 780px; margin-top: 40px; text-wrap: pretty;
}

/* ---------- feature blocks ---------- */
.features { padding: 0 24px 96px; }
.features .stack { max-width: 1160px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.card-lg {
  background: var(--white); border: 1px solid var(--hairline); border-radius: 24px; padding: 44px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 44px; align-items: center;
}
.card-lg h3, .card-sm h3 { letter-spacing: -0.02em; font-weight: 900; margin-top: 12px; }
.card-lg h3 { font-size: 2.125rem; line-height: 1.1; }
.card-lg .body, .card-sm .body { font-size: 1.0938rem; line-height: 1.6; color: rgba(26, 40, 56, 0.7); margin-top: 16px; text-wrap: pretty; }
.card-sm .body { font-size: 1.0313rem; margin-top: 14px; }
.arrow-list { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 1.0313rem; font-weight: 600; }
.arrow-list li { display: flex; gap: 10px; }
.arrow-list li::before { content: "→"; color: var(--orange); font-weight: 900; }
.bold-line { font-size: 1.0313rem; line-height: 1.6; margin-top: 16px; font-weight: 700; }

/* check-offs mock */
.mock-checks { background: var(--navy-deep); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.mock-checks .head { display: flex; justify-content: space-between; align-items: baseline; color: var(--mist); }
.mock-checks .head b { font-size: 1.125rem; font-weight: 800; }
.mock-checks .head span { font-size: .875rem; color: var(--orange); font-weight: 700; }
.mc-done {
  background: rgba(245, 247, 250, 0.07); border-radius: 12px; padding: 14px;
  color: rgba(245, 247, 250, 0.5); display: flex; gap: 12px; align-items: center;
}
.mc-done .tick { color: var(--green-ok-dark); font-size: 1.0313rem; display: flex; }
.mc-done .tick .uic, .mc-done .uic { width: 1em; height: 1em; fill: currentColor; }
.mc-done b { font-weight: 700; text-decoration: line-through; display: block; }
.mc-done small { font-size: .8125rem; margin-top: 2px; display: block; }
.mc-next { background: var(--mist); border-radius: 12px; padding: 14px; box-shadow: 0 0 0 2px rgba(242, 160, 61, 0.5); }
.mc-next .t { font-size: .875rem; font-weight: 800; color: var(--orange); }
.mc-next b { font-size: 1.0313rem; font-weight: 800; margin-top: 3px; display: block; }
.mc-next p { font-size: .875rem; color: rgba(26, 40, 56, 0.65); margin-top: 4px; line-height: 1.45; }
.mc-later { background: rgba(245, 247, 250, 0.07); border-radius: 12px; padding: 14px; color: rgba(245, 247, 250, 0.62); font-size: .9375rem; }
.mc-later span { color: var(--orange); font-weight: 700; }

/* finder mock */
.mock-map {
  border-radius: 18px; min-height: 300px; position: relative; overflow: hidden;
  border: 1px solid var(--hairline);
}
.mock-map .map-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mock-map .map-label {
  position: absolute; top: 14px; left: 14px; background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(26, 40, 56, 0.12); border-radius: 10px; padding: 6px 13px;
  font-size: .75rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: rgba(26, 40, 56, 0.65);
}
/* the app's actual finder pin (trip.css .fpin), verbatim look */
.mock-map .fpin {
  position: absolute; background: #fff; border: 2px solid var(--navy); border-radius: 14px;
  padding: 3px 10px; font-weight: 700; font-size: .9375rem; color: var(--navy);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); white-space: nowrap;
}
.mock-map .fpin::after {
  content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px; background: #fff; border-right: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
}
.mock-map .fpin-you { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(242, 160, 61, 0.25), 0 2px 8px rgba(0, 0, 0, 0.25); }
.mock-map .fpin-you::after { border-color: var(--orange); }

/* feed mock */
.mock-feed { background: var(--navy-deep); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.mock-feed .mf-head { display: flex; justify-content: space-between; align-items: baseline; color: var(--mist); }
.mock-feed .mf-head b { font-size: 1.125rem; font-weight: 800; }
.mock-feed .mf-head span { font-size: .875rem; color: var(--orange); font-weight: 700; }
.mf-post {
  background: rgba(245, 247, 250, 0.07); border-radius: 12px; padding: 12px;
  display: flex; gap: 12px; align-items: center;
}
.mf-img { flex: 0 0 auto; width: 74px; height: 74px; border-radius: 10px; }
/* photo placeholders: the app renders real uploads; the landing keeps abstract swatches */
.mf-a { background: linear-gradient(135deg, #3C75A4 0%, #8FB9DC 60%, #C9DCEC 100%); }
.mf-b { background: linear-gradient(135deg, #C25A1F 0%, #F2A03D 65%, #FFD9B3 100%); }
.mf-meta { min-width: 0; color: var(--mist); }
.mf-meta b { font-size: .9375rem; font-weight: 800; display: block; }
.mf-meta p { font-size: .9375rem; line-height: 1.4; color: rgba(245, 247, 250, 0.75); margin-top: 3px; }
.mf-likes { font-size: .8125rem; color: var(--orange); font-weight: 700; margin-top: 6px; display: block; }

/* half cards */
.half-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px; }
.card-sm { background: var(--white); border: 1px solid var(--hairline); border-radius: 24px; padding: 40px; }
.card-sm h3 { font-size: 1.875rem; line-height: 1.12; }
.inset {
  margin-top: 22px; background: var(--mist); border: 1px solid rgba(26, 40, 56, 0.12);
  border-radius: 14px; padding: 18px;
}
.inset .k { font-size: .8125rem; font-weight: 800; color: var(--blue); letter-spacing: 0.08em; text-transform: uppercase; }
.inset p { font-size: .9688rem; line-height: 1.55; margin-top: 8px; }
.res-rows { margin-top: 22px; display: flex; flex-direction: column; gap: 8px; font-size: .9375rem; }
.res-rows > div { display: flex; justify-content: space-between; background: var(--mist); border-radius: 10px; padding: 12px; }
.res-rows .ok { color: #1A7046; font-weight: 800; }   /* --green-ok was 3.8:1 on mist */
.res-rows .ask { color: var(--orange); font-weight: 800; }
.res-rows > div { gap: 12px; }
.res-rows > div > span:last-child { flex: 0 0 auto; }
/* a settle row with its buttons, as the Money tab draws one (trip.css .paylink / .paidbtn) */
.res-rows > div.pay { flex-wrap: wrap; }
.res-rows .pay-btns { flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.res-rows .pay-btns i {
  font-style: normal; font-size: .8125rem; font-weight: 800; padding: 5px 12px; border-radius: 7px;
  border: 1px solid rgba(26, 40, 56, 0.22); color: var(--navy);
}
.res-rows .pay-btns .vm { background: #0A84FF; border-color: #0A84FF; color: #fff; }
.res-rows .pay-btns .ca { background: #00C853; border-color: #00C853; color: var(--navy-deep); }

/* the demo card — closes the feature stack on the dark surface the mocks use */
.demo-card { background: var(--navy-deep); border-color: var(--navy-deep); color: var(--mist); }
.demo-card .eyebrow { color: var(--orange); }
.demo-card .body { color: rgba(245, 247, 250, 0.78); }
.demo-go {
  display: inline-block; margin-top: 26px; background: var(--orange); color: var(--navy);
  padding: 15px 26px; border-radius: 12px; font-weight: 800; font-size: 1.0938rem; white-space: nowrap;
}
.demo-go:hover { background: var(--orange-hover); color: var(--navy); }
.demo-fine { font-size: .9375rem; color: rgba(245, 247, 250, 0.6); margin-top: 14px; }
.demo-jumps { display: flex; flex-direction: column; gap: 10px; }
.demo-jumps > b {
  font-size: .8125rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(245, 247, 250, 0.6);
}
.demo-jumps a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: rgba(245, 247, 250, 0.07); border: 1px solid rgba(245, 247, 250, 0.14);
  border-radius: 12px; padding: 14px 16px; color: var(--mist);
  font-size: 1.0313rem; font-weight: 800; transition: background .15s, border-color .15s;
}
.demo-jumps a::after { content: "→"; color: var(--orange); font-weight: 900; }
.demo-jumps a:hover, .demo-jumps a:focus-visible { background: rgba(245, 247, 250, 0.13); border-color: var(--orange); color: var(--white); }
.demo-jumps small { display: block; margin-top: 2px; font-size: .875rem; font-weight: 500; color: rgba(245, 247, 250, 0.62); }
/* links inside body copy read as links without relying on colour alone */
.whatis p a, .faq .qa a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- how it works ---------- */
.how { background: var(--navy); color: var(--mist); padding: 92px 24px; }
.how .head { max-width: 720px; }
.how .eyebrow { color: var(--orange); }
.how h2 { font-size: 2.875rem; line-height: 1.06; letter-spacing: -0.025em; font-weight: 900; margin-top: 14px; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 22px; margin-top: 44px; }
.step {
  background: rgba(245, 247, 250, 0.06); border: 1px solid rgba(245, 247, 250, 0.12);
  border-radius: 20px; padding: 30px;
}
.step .n { font-size: 2.875rem; font-weight: 900; color: var(--orange); line-height: 1; }
.step h3 { font-size: 1.5rem; font-weight: 800; margin-top: 14px; letter-spacing: -0.01em; }
.step p { font-size: 1.0313rem; line-height: 1.6; color: rgba(245, 247, 250, 0.72); margin-top: 12px; }
.cta-banner {
  margin-top: 40px; background: var(--orange); color: var(--navy); border-radius: 20px;
  padding: 30px 34px; display: flex; flex-wrap: wrap; gap: 20px;
  align-items: center; justify-content: space-between;
}
.cta-banner b { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.01em; max-width: 640px; text-wrap: pretty; }
.cta-banner a {
  background: var(--navy); color: var(--mist); padding: 15px 26px;
  border-radius: 12px; font-weight: 800; font-size: 1.0938rem; white-space: nowrap;
}
.cta-banner a:hover { color: var(--white); }
.cta-pair { display: flex; flex-wrap: wrap; gap: 10px; }
.cta-banner a.alt { background: transparent; color: var(--navy); border: 2px solid var(--navy); padding: 13px 24px; }
.cta-banner a.alt:hover { background: rgba(26, 40, 56, 0.12); color: var(--navy); }
/* --blue on navy is under 3:1 — same lighter blue the hero's aside uses */
.step p a { color: #8FC1EA; text-decoration: underline; text-underline-offset: 2px; }
.step p a:hover { color: var(--mist); }

/* ---------- recap ---------- */
.recap { background: var(--navy-deep); color: var(--mist); padding: 92px 24px; }
.recap .grid {
  max-width: 1160px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 56px; align-items: center;
}
.recap .eyebrow { color: #8FC1EA; }   /* --blue on navy-deep was 3.35:1; this is 8.6:1 (audit J20) */
.recap h2 { font-size: 2.875rem; line-height: 1.06; letter-spacing: -0.025em; font-weight: 900; margin-top: 14px; }
.recap .body { font-size: 1.125rem; line-height: 1.6; color: rgba(245, 247, 250, 0.78); margin-top: 18px; max-width: 540px; text-wrap: pretty; }
.recap .ask-twice { font-size: 1.0938rem; line-height: 1.6; margin-top: 18px; font-weight: 700; color: var(--orange); }
.mini-phones { display: flex; gap: 16px; justify-content: center; }
.mini {
  width: 178px; border: 9px solid var(--navy-shadow); border-radius: 30px;
  background: var(--navy); padding: 26px 16px; text-align: center;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}
.mini.stat { background: var(--green-recap); margin-top: 34px; }
.mini .date { font-size: .75rem; color: rgba(245, 247, 250, 0.55); letter-spacing: 0.1em; }
.mini .title { font-size: 1.625rem; font-weight: 900; line-height: 1.1; margin-top: 40px; }
.mini .stars { font-size: 1.0313rem; margin-top: 14px; color: var(--orange); }
.mini .tap { font-size: .8125rem; color: rgba(245, 247, 250, 0.55); margin-top: 40px; }
.mini .k { font-size: .75rem; color: rgba(245, 247, 250, 0.6); letter-spacing: 0.14em; }
.mini .big { font-size: 4.5rem; font-weight: 900; line-height: 1; margin-top: 30px; }
.mini .cap { font-size: .875rem; line-height: 1.5; color: rgba(245, 247, 250, 0.82); margin-top: 12px; }

/* ---------- pricing ---------- */
/* Free vs Pro in one glance, with the plan's words defined underneath (Sept 29 2026: the price
   used to live in one paragraph and one FAQ answer). Same cards as the FAQ; Pro gets the
   orange edge the retreats page's .choose uses. */
.pricing { padding: 92px 24px 0; }
.pricing .eyebrow { color: var(--blue); }
.pricing h2 { font-size: 2.625rem; line-height: 1.08; letter-spacing: -0.025em; font-weight: 900; max-width: 760px; margin-top: 14px; text-wrap: balance; }
.pricing .promo {
  display: inline-block; margin-top: 22px; background: rgba(242, 160, 61, 0.16);
  border: 1px solid rgba(242, 160, 61, 0.6); border-radius: 12px; padding: 10px 16px;
  font-size: 1rem; line-height: 1.5;
}
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px; margin-top: 28px; }
.plan { background: var(--white); border: 1px solid var(--hairline); border-radius: 18px; padding: 28px; }
.plan.pro { border: 2px solid var(--orange); }
.plan h3 { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.01em; }
.plan .price { font-size: 1.25rem; font-weight: 800; margin-top: 4px; }
.plan .price small { display: block; font-size: .9375rem; font-weight: 600; color: rgba(26, 40, 56, 0.75); margin-top: 2px; }
.plan .arrow-list { font-size: 1rem; font-weight: 500; line-height: 1.5; }
.plans-foot { font-size: 1.0313rem; line-height: 1.6; font-weight: 700; margin-top: 20px; max-width: 760px; }
.pricing .terms { margin: 24px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 12px 28px; }   /* four answers: 2×2 on a laptop, one column on a phone */
.pricing .terms dt { font-size: 1rem; font-weight: 800; }
.pricing .terms dd { margin: 4px 0 0; font-size: .9688rem; line-height: 1.55; color: rgba(26, 40, 56, 0.7); }
.pro-tag { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- FAQ ---------- */
.faq { padding: 92px 24px; }
.faq h2 { font-size: 2.625rem; line-height: 1.08; letter-spacing: -0.025em; font-weight: 900; max-width: 680px; }
.faq .grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 20px; margin-top: 40px;
}
.faq .qa { background: var(--white); border: 1px solid var(--hairline); border-radius: 18px; padding: 28px; }
.faq h3 { font-size: 1.25rem; font-weight: 800; }
.faq p { font-size: 1.0313rem; line-height: 1.6; color: rgba(26, 40, 56, 0.7); margin-top: 10px; }

/* ---------- final CTA ---------- */
.final { background: var(--orange); color: var(--navy); padding: 96px 24px; text-align: center; }
.final .inner { max-width: 780px; margin: 0 auto; }
.final img { height: 64px; width: auto; display: block; margin: 0 auto; }
.final h2 { font-size: 3.375rem; line-height: 1.04; letter-spacing: -0.03em; font-weight: 900; margin-top: 26px; }
.final .body { font-size: 1.1875rem; line-height: 1.55; margin-top: 18px; color: rgba(26, 40, 56, 0.78); }
.final .signup { margin: 32px auto 0; justify-content: center; }
.final .signup input { flex-basis: 240px; background: var(--white); border: 2px solid var(--navy); }
.final .signup button { background: var(--navy); color: var(--mist); }
.final .signup button:hover:not(:disabled) { background: var(--navy-mid); }
.final .form-note { color: var(--navy); }   /* was 3.9:1 on the orange (audit J20) */
.final .form-err { color: var(--err); }
.final .signed-in a { color: var(--navy); text-decoration: underline; }

/* ---------- footer ---------- */
.footer { background: var(--navy-deep); color: rgba(245, 247, 250, 0.62); padding: 44px 24px; }
.footer .row {
  max-width: 1160px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 24px;
  align-items: center; justify-content: space-between; font-size: .9688rem;
}
.footer .brand { display: flex; align-items: center; gap: 14px; }
.footer img { height: 38px; width: 38px; border-radius: 10px; display: block; }
.footer nav { display: flex; gap: 12px 22px; flex-wrap: wrap; }
.footer a { color: rgba(245, 247, 250, 0.72); }
.footer a:hover { color: var(--mist); }

/* mobile disclosure menu (hidden on desktop) */
.mnav { display: none; position: relative; }
.mnav summary { list-style: none; cursor: pointer; font-size: 1.5rem; line-height: 1; padding: 4px 2px 4px 10px; color: var(--navy); position: relative; }
/* the glyph box is 33×32; the tap area is 45×44 and the header doesn't move (audit J20) */
.mnav summary::after { content: ""; position: absolute; inset: -6px -6px; }
.mnav summary::-webkit-details-marker { display: none; }
.mnav summary::before { content: "☰"; }
.mnav[open] summary::before { content: "✕"; }
.mnav nav {
  position: absolute; right: 0; top: 42px; background: var(--white);
  border: 1px solid var(--hairline); border-radius: 14px; padding: 6px 14px;
  display: flex; flex-direction: column; gap: 0; font-size: .9688rem; font-weight: 600;
  box-shadow: 0 12px 30px rgba(26, 40, 56, 0.15); min-width: 210px;
}
/* each link a full-width 44px row (they were 19px tall with dead gaps between, audit J20); the
   .topbar prefix outranks the phone media queries' `.topbar nav { gap }` further down */
.topbar .mnav nav { gap: 0; }
.mnav nav a { display: flex; align-items: center; justify-content: center; align-self: stretch; min-height: 44px; padding: 0 6px; }
.mnav nav a.mnav-demo { color: var(--navy); font-weight: 800; border-bottom: 1px solid var(--hairline); margin-bottom: 4px; }

/* ---------- responsive ---------- */
/* Eight items in the desktop nav since "Pricing" joined it: a tighter gap (with the short
   "Families" label) keeps it on one line from 880px, where it used to wrap to two or three
   lines up to ~975px (Sept 29 2026). */
@media (min-width: 769px) and (max-width: 1100px) {
  .topbar nav { gap: 18px; }
}
/* Nine items since "Live demo" joined (Oct 2 2026) need ~1050px. Below that the in-page links
   drop out in order of how little they're missed — every one is still in the footer — so the
   two pills and Sign in never wrap or push the page sideways. */
.topbar .row > nav a { white-space: nowrap; }
@media (min-width: 769px) and (max-width: 1060px) {
  .topbar .row > nav a[href="#questions"], .topbar .row > nav a[href="#everyone"] { display: none; }
}
@media (min-width: 769px) and (max-width: 900px) {
  .topbar .row > nav a[href="/compare/"], .topbar .row > nav a[href="#pricing"] { display: none; }
}
@media (max-width: 768px) {
  /* hide only the primary nav's text links — .mnav's own dropdown links must stay visible */
  .topbar .row > nav a:not(.pill-cta) { display: none; }
  .mnav { display: block; }
  /* a returning organizer looks top-right for this — kept wherever it fits beside the CTA */
  .topbar .row > nav a#navSignin { display: block; font-size: .875rem; white-space: nowrap; position: relative; }
  .topbar .row > nav a#navSignin::after { content: ""; position: absolute; inset: -14px -5px; }   /* 17px text, 45px tap */
  .hero { padding: 56px 24px 72px; }
  .hero .grid { grid-template-columns: 1fr; grid-template-areas: "head" "phone" "rest"; gap: 30px 0; }
  .hero-rest .lede { margin-top: 0; }
  .loop .phone-link { width: min(330px, 100%); }
  .hero::after {
    background: linear-gradient(180deg,
      rgba(20, 32, 45, 0.9) 0%, rgba(20, 32, 45, 0.55) 46%, rgba(20, 32, 45, 0.2) 100%);
  }
  .hero h1 { font-size: 2.5rem; }
  .hero .kicker { font-size: 1.5rem; }
  .problem h2, .how h2, .recap h2 { font-size: 2rem; }
  .faq h2, .pricing h2 { font-size: 1.875rem; }
  .pricing { padding-top: 64px; }
  .final h2 { font-size: 2.125rem; }
  .problem, .how, .recap, .faq { padding-top: 64px; padding-bottom: 64px; }
  .features { padding-bottom: 64px; }
  .card-lg { padding: 28px; gap: 28px; }
  .card-sm { padding: 28px; }
  .mini-phones { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  /* logo + CTA + burger must fit a 320px Fold cover screen */
  .topbar .row { gap: 12px; padding: 12px 14px; }
}
@media (max-width: 359px) {
  /* too narrow for Sign in beside the CTA — it stays in the menu */
  .topbar .row > nav a#navSignin { display: none; }
}
@media (max-width: 480px) {
  .topbar nav { gap: 12px; }
  .pill-cta { padding: 10px 14px; }
}
@media (max-width: 389px) {
  /* logo + "Sign in" + the pill + the menu on one line from 360px (UX-18) */
  .topbar .row { gap: 10px; }
  .topbar nav { gap: 10px; }
  .pill-cta { padding: 9px 12px; font-size: .9063rem; }
  .topbar .row > nav a#navSignin { font-size: .8438rem; }
}
@media (max-width: 480px) {
  .pins { grid-template-columns: 1fr; }
  .pin.down1, .pin.down2 { transform: none; }
  .mock-map .foot { margin-top: 22px; }
}

/* ---------- Liquid Glass (Oct 15 2026): the product's default look, on its own front page ----------
   The material the app wears (base.css --glass-*), in the landing's own tokens: a wash of the
   brand's colours behind the light sections (one fixed layer), the cards as frosted panes with a
   lit top edge, the panels on the navy sections lit the same way, and the hero phone showing the
   app as it now opens. No backdrop blur on the panes — over a smooth wash it shows nothing and
   costs a layer per card; the sticky header keeps its blur because real content scrolls under
   it. Long copy stays on a pane, never on the wash (glass for chrome and short labels, paper for
   paragraphs). Solid again under Reduce Transparency. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(74% 46% at 6% 42%, rgba(143, 185, 220, 0.62), transparent 72%),
    radial-gradient(60% 42% at 96% 62%, rgba(242, 160, 61, 0.34), transparent 72%),
    radial-gradient(84% 50% at 40% 104%, rgba(60, 117, 164, 0.3), transparent 70%),
    var(--mist);
}
.quote, .card-lg, .card-sm, .plan, .faq .qa {
  background-color: rgba(255, 255, 255, 0.66); border-color: rgba(255, 255, 255, 0.9);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.12) 46%, rgba(255, 255, 255, 0));
  box-shadow: inset 0 1px 0 #fff, 0 14px 36px -16px rgba(15, 42, 67, 0.3);
}
.plan.pro { border-color: var(--orange); }
.demo-card {
  background-color: var(--navy-deep); background-image: none; border-color: rgba(245, 247, 250, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 14px 36px -16px rgba(15, 42, 67, 0.4);
}
.inset, .res-rows > div {
  background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 1px 0 #fff;
}
.proof { background: rgba(255, 255, 255, 0.55); border-bottom-color: rgba(255, 255, 255, 0.9); box-shadow: inset 0 1px 0 #fff; }
.mock-checks { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
/* on the navy sections: the lit top edge is what reads as glass; the fill stays as it was */
.step, .demo-jumps a, .onphone, .onphone a, .pastecard, .tt-chips span, .tt-chips a, .loop-nav button, .auth-warn {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
/* the hero phone shows the app as it opens now: the wash behind the screens, every card a pane */
.phone .p-screens {
  background:
    radial-gradient(80% 50% at 8% 40%, rgba(143, 185, 220, 0.7), transparent 72%),
    radial-gradient(64% 46% at 96% 66%, rgba(242, 160, 61, 0.5), transparent 72%),
    radial-gradient(90% 50% at 40% 104%, rgba(60, 117, 164, 0.4), transparent 70%),
    var(--mist);
}
.p-stop, .p-tiles div, .p-row, .p-post, .p-compose {
  background-color: rgba(255, 255, 255, 0.52); border-color: rgba(255, 255, 255, 0.86);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.12) 46%, rgba(255, 255, 255, 0));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 14px 36px -16px rgba(15, 42, 67, 0.4);
}
.p-stop { border-radius: 16px; }
.p-stop.next {
  border-color: rgba(242, 160, 61, 0.55);
  box-shadow: 0 0 0 3px rgba(242, 160, 61, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 14px 36px -16px rgba(15, 42, 67, 0.4);
}
.p-stop .chips span, .p-row em.mp, .p-who i, .p-stop .p-ic.emo, .p-pin em {
  background: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 2px rgba(15, 42, 67, 0.07);
}
@media (prefers-reduced-transparency: reduce) {
  body::before { display: none; }
  .quote, .card-lg, .card-sm, .plan, .faq .qa, .proof, .inset, .res-rows > div,
  .p-stop, .p-tiles div, .p-row, .p-post, .p-compose { background-color: var(--white); background-image: none; }
  .demo-card { background-color: var(--navy-deep); }
  .phone .p-screens { background: var(--mist); }
}