/* weekendtrips.app: the app's own brand (Paper, Forest, Deep forest, Newsreader + Hanken),
   real screens in upright phone frames, tinted tiles. */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --paper: #f7f6f2;
  --paper-2: #ecebe5;
  --surface: #ffffff;
  --line: #e2e0d8;
  --ink: #1c1d1a;
  --muted: #676860;
  --forest: #2f5a45;
  --forest-soft: #e0e9e2;
  --sand: #efe3d2;
  --deep: #0c1b13;
  --deep-2: #16291f;
  --mint: #8fd9ae;
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.55 "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.narrow { max-width: 720px; }
/* Headlines: the app's own Hanken Grotesk, bold and tight (option B). */
h1, h2 { font-family: "Hanken Grotesk", -apple-system, sans-serif; font-weight: 700; letter-spacing: -0.045em; }
h2 { font-size: 52px; line-height: 1.02; }
h3 { font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
p { color: var(--muted); }

/* Pills: Ink is the one primary; Forest is used only for state, as in the app. */
.pill {
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 600; font-size: 15px;
}
.pill.big { min-height: 56px; padding: 0 28px; font-size: 17px; }
.pill.light { background: var(--paper); color: var(--deep); }
.pill.outline { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1px rgba(234, 241, 234, 0.4); }
.pill.outline-ink { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }

/* The phone frame: upright, a dark bezel, the camera hole, a soft shadow. */
.phone {
  position: relative; width: 100%;
  padding: 9px; border-radius: 44px; background: #0e100f;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 28px 60px -28px rgba(12, 27, 19, 0.45);
}
.phone::after {
  content: ""; position: absolute; top: 19px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px;
  border-radius: 50%; background: #0e100f; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.05);
}
.phone img { width: 100%; border-radius: 36px; background: var(--paper-2); aspect-ratio: 720 / 1600; object-fit: cover; object-position: top; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 10; background: rgba(247, 246, 242, 0.88); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; text-decoration: none; color: var(--ink); }
.brand img { border-radius: 8px; }
.nav nav { display: flex; align-items: center; gap: 26px; font-size: 15px; }
.nav nav a:not(.pill) { color: var(--muted); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.nav nav a:not(.pill):hover { color: var(--ink); }

/* Hero */
.hero { padding-top: 64px; }
.hero-copy { text-align: center; }
h1 { font-size: 80px; line-height: 0.98; max-width: 13ch; margin: 0 auto; }
.lede { font-size: 21px; line-height: 1.5; max-width: 36em; margin: 26px auto 0; color: #45463f; }
.actions { margin-top: 34px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.actions .note { font-size: 14px; color: var(--muted); }

.stage {
  position: relative; margin-top: 64px; height: 560px; overflow: hidden;
  border-radius: 40px; background: var(--forest-soft);
}
.hero-phone { position: absolute; left: 50%; top: 56px; width: 350px; margin-left: -175px; }
.float {
  position: absolute; z-index: 2; background: var(--surface); border-radius: 22px; padding: 14px;
  box-shadow: 0 1px 0 rgba(28, 29, 26, 0.04), 0 22px 44px -24px rgba(12, 27, 19, 0.35);
}
.float figcaption { font-size: 14px; font-weight: 600; color: var(--muted); margin: 2px 4px 10px; }
.float img { border-radius: 12px; }
.float figcaption { letter-spacing: -0.01em; }
.float-left { left: 5%; top: 150px; width: 320px; }
.float-right { right: 4.5%; top: 110px; width: 318px; }
.float-right-low { right: 7%; top: 318px; width: 306px; }

/* Hero cards rebuilt from the vote page and the app's strip (their real colours and shapes). */
.ui-vote { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px; border-radius: 16px; background: #eaf0e8; }
.ui-tile { height: 58px; border-radius: 13px; border: 1px solid #b9c6ba; background: #fff; color: #17201a; white-space: nowrap;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-weight: 600; font-size: 13px; }
.ui-tile svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ui-tile.on { background: #17201a; color: #eaf0e8; border-color: transparent; }
.ui-strip { display: flex; align-items: center; gap: 10px; padding: 2px 4px 4px; }
.ui-faces { display: flex; flex: none; }
.ui-faces i { width: 26px; height: 26px; border-radius: 50%; margin-right: -7px; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; border: 2px solid #fff; background: #dce8e0; color: #2f5a45; }
.ui-faces i:nth-child(2) { background: #efe3d2; color: #7a4e16; }
.ui-faces i:nth-child(3) { background: #e2e4f0; color: #3b4370; }
.ui-lines { display: flex; flex-direction: column; min-width: 0; margin-left: 6px; white-space: nowrap; }
.ui-lines b { font-size: 14px; font-weight: 600; color: var(--ink); }
.ui-lines small { font-size: 13px; color: var(--muted); }
.ui-chev { width: 16px; height: 16px; margin-left: auto; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* How it works: steps beside one phone */
.how { padding-top: 140px; }
.how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.how h2 { max-width: 13ch; }
.tabs { list-style: none; margin-top: 44px; display: grid; gap: 4px; border-left: 2px solid var(--line); }
.tabs button {
  position: relative; display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; align-items: baseline;
  width: 100%; text-align: left; border: 0; cursor: pointer; font: inherit; background: transparent;
  color: var(--muted); padding: 16px 0 16px 26px; margin-left: -2px;
}
.tab-num { grid-row: span 2; font-size: 15px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.tab-title { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; transition: color 0.2s ease; }
.tabs button:hover .tab-title { color: var(--ink); }
.tabs button[aria-selected="true"] .tab-title, .tabs button[aria-selected="true"] .tab-num { color: var(--ink); }
/* Only the active step shows its line; switching is instant, nothing lingers. */
.tab-body { display: none; grid-column: 2; margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--muted); max-width: 30em; }
.tabs button[aria-selected="true"] .tab-body { display: block; animation: body-in 0.35s ease both; }
@keyframes body-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* The rail: a forest line runs down beside the active step while it plays. */
.bar { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: transparent; }
.tabs button[aria-selected="true"] .bar { background: var(--ink); }
.tabs.playing button[aria-selected="true"] .bar { background: var(--line); }
.bar::after { content: ""; position: absolute; inset: 0; background: var(--forest); transform-origin: top; transform: scaleY(0); }
.tabs.playing button[aria-selected="true"] .bar::after { animation: fill var(--step-ms, 4500ms) linear forwards; }
@keyframes fill { to { transform: scaleY(1); } }
.tabs.chosen button[aria-selected="true"] .bar { background: var(--forest); }

.how-stage { position: relative; padding: 48px 0; border-radius: 40px; background: var(--sand); display: flex; justify-content: center; }
.how-phone { width: 300px; }
.how-phone .screen { position: absolute; top: 9px; left: 9px; width: calc(100% - 18px); opacity: 0; transition: opacity 0.45s ease; }
.how-phone .screen:first-child { position: relative; top: 0; left: 0; width: 100%; }
.how-phone .screen.on { opacity: 1; }

/* Bento */
.more { padding-top: 150px; }
.more h2 { max-width: 16ch; margin: 0 auto; text-align: center; }
.bento { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tile { position: relative; overflow: hidden; isolation: isolate; border-radius: 34px; height: 560px; padding: 40px 40px 0; display: flex; flex-direction: column; }
.tile-copy { max-width: 25em; }
.tile h3 { font-size: 26px; }
.tile p { margin-top: 10px; font-size: 17px; }
.tile-green { background: var(--forest-soft); }
.tile-sand { background: var(--sand); }
.tile-paper { background: var(--paper-2); }
.tile-dark { background: var(--deep); }
.tile-dark h3 { color: #eaf1ea; }
.tile-dark p { color: #a3b8aa; }
/* A dark phone on a dark tile needs a faint edge to read. */
.tile-dark .phone, .get-phone { box-shadow: 0 0 0 1px rgba(234, 241, 234, 0.16), 0 28px 60px -28px rgba(0, 0, 0, 0.6); }
.peek { width: 300px; margin: 36px auto 0; }
/* Its phone runs off the top instead, so the bottom of the list (Sana's places) shows. */
.tile-flip { padding: 0 40px 40px; }
.tile-flip .peek { order: -1; margin: -330px auto 32px; }
.tile .preview { margin-top: auto; margin-bottom: 40px; border-radius: 18px; width: 100%; box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.6); }

/* Get it */
.get { padding-top: 150px; }
.get-card {
  position: relative; overflow: hidden; border-radius: 40px; background: var(--deep);
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; padding: 64px 64px 0;
}
.get-copy { padding-bottom: 64px; }
.get h2 { color: #eaf1ea; font-size: 60px; }
.get-copy > p { color: #a3b8aa; font-size: 19px; margin-top: 14px; }
.two { list-style: none; margin-top: 36px; display: grid; gap: 22px; }
.two li { display: grid; grid-template-columns: 30px 1fr; gap: 16px; align-items: start; }
.two li > span {
  width: 30px; height: 30px; border-radius: 50%; background: var(--deep-2); color: var(--mint);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
}
.two strong { display: block; color: #eaf1ea; font-size: 17px; margin: 3px 0 12px; }
.get-foot { margin-top: 40px; display: flex; gap: 18px; align-items: center; max-width: 34em; }
.get-foot .qr { border-radius: 12px; background: var(--paper); padding: 6px; flex: none; }
.get-foot p { color: #a3b8aa; font-size: 15px; }
.get-phone { align-self: end; width: 330px; justify-self: center; margin-bottom: -150px; }

/* FAQ */
.faq { padding-top: 140px; padding-bottom: 110px; }
.faq h2 { font-size: 44px; margin-bottom: 18px; }
details { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; min-height: 64px; display: flex; align-items: center; font-weight: 600; font-size: 18px; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; margin-left: auto; color: var(--muted); font-weight: 400; font-size: 24px; }
details[open] summary::after { content: "–"; }
details p { padding-bottom: 20px; font-size: 16px; }

/* Footer */
.foot { border-top: 1px solid var(--line); padding: 28px 0 40px; }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; }
.foot .brand { font-size: 16px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 15px; }
.foot nav a { color: var(--muted); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }

/* Tablet */
@media (max-width: 1080px) {
  h1 { font-size: 68px; }
  h2 { font-size: 44px; }
  .float-left { left: 3%; width: 270px; }
  .float-right { right: 3%; width: 270px; }
  .float-right-low { right: 4%; width: 250px; }
  .tile { height: 520px; padding: 32px 32px 0; }
}

/* Phones: most visitors arrive from a WhatsApp link. */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .wrap { padding-left: 20px; padding-right: 20px; }
  .nav nav a:not(.pill) { display: none; }
  .hero { padding-top: 28px; }
  h1 { font-size: 46px; }
  h2 { font-size: 36px; }
  .lede { font-size: 18px; margin-top: 18px; }
  .actions .pill.big { width: 100%; }
  .stage { margin-top: 40px; height: 600px; padding: 24px 18px 0; border-radius: 30px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .float { position: static; width: 100%; max-width: 360px; padding: 12px; }
  .float-right, .float-right-low { display: none; }
  .hero-phone { position: relative; left: auto; top: auto; margin: 12px 0 0; width: 270px; }
  .how { padding-top: 100px; }
  .how-grid { grid-template-columns: 1fr; gap: 28px; }
  .tabs { margin-top: 24px; }
  .tab-title { font-size: 19px; }
  .tabs button { padding: 13px 0 13px 18px; grid-template-columns: 26px 1fr; column-gap: 10px; }
  .how-stage { padding: 32px 0; border-radius: 30px; }
  .how-phone { width: 240px; }
  .more { padding-top: 110px; }
  .bento { grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }
  .tile { height: 500px; padding: 28px 24px 0; border-radius: 28px; }
  .tile h3 { font-size: 23px; }
  .peek { width: 250px; }
  .tile-flip { padding: 0 24px 28px; }
  .tile-flip .peek { margin: -250px auto 24px; }
  .get { padding-top: 110px; }
  .get-card { grid-template-columns: 1fr; padding: 40px 24px 0; border-radius: 30px; gap: 0; }
  .get h2 { font-size: 40px; }
  .two .pill { width: 100%; }
  .get-foot .qr { display: none; }
  .get-foot { margin-top: 28px; }
  .get-copy { padding-bottom: 40px; }
  .get-phone { width: 250px; margin-bottom: -120px; }
  .faq { padding-top: 100px; padding-bottom: 80px; }
  .faq h2 { font-size: 36px; }
}

/* ---- Motion: calm, once, and off for anyone who asks for less ---- */
.pill { transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; }
.pill:hover { transform: translateY(-1px); }
.pill.big:hover { box-shadow: 0 10px 24px -12px rgba(28, 29, 26, 0.6); }
.nav { transition: box-shadow 0.25s ease; }
.nav.scrolled { box-shadow: 0 1px 0 var(--line); }

@media (prefers-reduced-motion: no-preference) {
  /* Hero, on load */
  .hero-copy > * { animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero-copy > :nth-child(2) { animation-delay: 0.08s; }
  .hero-copy > :nth-child(3) { animation-delay: 0.16s; }
  .stage { animation: fade 0.9s ease 0.15s both; }
  .hero-phone { animation: phone-up 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s both; }
  .float { animation: card-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .float-left { animation-delay: 0.65s; }
  .float-right { animation-delay: 0.8s; }
  .float-right-low { animation-delay: 0.95s; }

  /* On scroll: [data-reveal] rises once when it comes into view; children can stagger. */
  [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--delay, 0s); }
  [data-reveal].in { opacity: 1; transform: none; }
  .tile .peek { transform: translateY(60px); transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s; }
  .tile.in .peek { transform: none; }
  .tile-flip .peek { transform: translateY(-60px); }
  .get-phone { transform: translateY(70px); transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s; }
  .get-card.in .get-phone { transform: none; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes phone-up { from { opacity: 0; transform: translateY(90px); } to { opacity: 1; transform: none; } }
@keyframes card-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { @keyframes phone-up { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } } }