/* tourwellapp.com — the parts that are not the pitch page.
 *
 * Header, footer, and the three pages the pitch page is not: home, pricing
 * and contact. Tokens and the typeface come from tokens.css, which is
 * lifted verbatim from the pitch deck — this file never re-picks a colour,
 * so the site and the deck cannot drift.
 *
 * No JavaScript anywhere on this site. A marketing page that cannot render
 * its own navigation without a script is a marketing page that shows a
 * blank screen on a bad connection in a venue car park, which is exactly
 * where the audience is.
 */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* The one rule that keeps a long table or a wide diagram from taking the
     whole page sideways with it. */
  overflow-x: hidden;
}

a { color: var(--mint); }

:focus-visible {
  outline: 2px solid var(--mint-solid);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── header ──────────────────────────────────────────────────────────── */

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Opaque, by stacking the deck's translucent dock tint over solid ground
     — so the hue still matches the app's chrome, but nothing scrolls
     through it. The frosted version read as an accident rather than as
     glass: at 86% over a page of dense text, headings ghosted through the
     nav and both became harder to read.
     No backdrop-filter now: it would blur a backdrop nothing can see, at
     a real cost on every scroll frame. */
  background: linear-gradient(var(--dock), var(--dock)), var(--ground);
  border-bottom: 1px solid var(--dock-edge);
  /* A shadow instead, so it still reads as a layer above the page. */
  box-shadow: 0 1px 12px -6px rgba(0, 0, 0, 0.35);
}

.site-head-in {
  max-width: 1080px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.brand {
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}
.brand span { color: var(--mint); }

.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  /* Order matters on the narrow layout below: the links drop to their own
     row while the brand and the log-in button stay together up top. */
  order: 3;
  width: 100%;
}

.site-nav a {
  color: var(--ink-muted);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current='page'] {
  color: var(--ink);
  border-bottom-color: var(--mint-solid);
}

/* ── buttons ─────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
}

.btn-primary {
  background: var(--mint);
  color: var(--ground);
  border-color: var(--mint);
}
.btn-primary:hover { filter: brightness(1.08); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn-ghost:hover { border-color: var(--ink-subtle); }

.btn-lg { font-size: 17px; padding: 14px 26px; border-radius: 12px; }

/* ── page furniture ──────────────────────────────────────────────────── */

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}
.wrap-narrow { max-width: 720px; }

section { padding: 72px 0; }
section + section { padding-top: 0; }

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint);
  margin: 0 0 14px;
}

h1, h2, h3 {
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0 0 18px;
  font-weight: 700;
}
h1 { font-size: clamp(34px, 6vw, 60px); }
h2 { font-size: clamp(26px, 4vw, 38px); }
h3 { font-size: 19px; line-height: 1.25; }

p { margin: 0 0 18px; max-width: 62ch; }

.lede {
  font-size: clamp(18px, 2.2vw, 21px);
  color: var(--ink-muted);
  line-height: 1.55;
}

/* ── hero ────────────────────────────────────────────────────────────── */

.hero { padding: clamp(56px, 9vw, 104px) 0 clamp(48px, 7vw, 84px); }

/* Two soft washes rather than a gradient bar. The point is depth behind
   the headline, not a band of colour across the top of the page. */
.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 15% 0%, var(--glow) 0%, transparent 70%),
    radial-gradient(45% 50% at 92% 12%, var(--glow-2) 0%, transparent 72%);
  z-index: -1;
}
.hero-holder { position: relative; }

.cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.cta-note {
  font-size: 14px;
  color: var(--ink-subtle);
  margin-top: 14px;
}

/* ── feature grid ────────────────────────────────────────────────────── */

.grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 26px 24px;
}

.card h3 { margin-bottom: 8px; }
.card p { margin: 0; color: var(--ink-muted); font-size: 16px; }

.card-icon {
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  color: var(--mint);
}
.card-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── the one-line proof band ─────────────────────────────────────────── */

.band {
  background: var(--sunken);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 56px 0;
  margin: 72px 0 0;
}
.band p { font-size: clamp(20px, 3vw, 27px); color: var(--ink); margin: 0; max-width: 30ch; }
.band strong { color: var(--mint); font-weight: 700; }

/* ── pricing ─────────────────────────────────────────────────────────── */

.tiers {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  margin-top: 34px;
}

.tier {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
}

.tier-featured {
  border-color: var(--mint-solid);
  /* One tier carries the emphasis; the rest stay quiet. A page where every
     card is highlighted has highlighted nothing. */
  box-shadow: 0 0 0 1px var(--mint-solid), 0 14px 40px -22px var(--glow);
}

.tier-name { font-size: 15px; font-weight: 700; color: var(--ink-muted); margin: 0 0 10px; }

.tier-price {
  font-size: 33px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0;
  /* Prices in a row must line up regardless of digit widths. */
  font-variant-numeric: tabular-nums;
}
.tier-per { font-size: 14px; color: var(--ink-subtle); margin: 6px 0 0; }
.tier-year { font-size: 13px; color: var(--ink-subtle); margin: 12px 0 0; }
/* Straddles the top border rather than sitting in the flow. In the flow it
   pushed the featured tier's contents down by its own height, so R100,
   R250 and R400 sat at three different heights — the one thing a row of
   prices must not do. */
.tier-tag {
  position: absolute;
  top: -11px;
  left: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ground);
  background: var(--mint);
  border-radius: 999px;
  padding: 3px 10px;
}

.included {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: grid;
  gap: 10px;
}
.included li {
  position: relative;
  padding-left: 26px;
  color: var(--ink-muted);
  font-size: 16px;
}
.included li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 8px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--mint-solid);
  border-bottom: 2px solid var(--mint-solid);
  transform: rotate(-45deg);
}

.faq { margin-top: 56px; display: grid; gap: 22px; }
.faq h3 { margin-bottom: 6px; }
.faq p { margin: 0; color: var(--ink-muted); }

/* ── contact ─────────────────────────────────────────────────────────── */

.form { display: grid; gap: 16px; margin-top: 30px; max-width: 560px; }

.field { display: grid; gap: 6px; }
.field label { font-size: 14px; font-weight: 700; color: var(--ink-muted); }

.field input,
.field textarea,
.field select {
  font: inherit;
  font-size: 16px; /* 16px or iOS zooms the page on focus */
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  padding: 12px 14px;
  width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--mint-solid);
  outline: none;
  box-shadow: 0 0 0 3px var(--glow);
}

/* Bot bait. Hidden from people and from screen readers; anything that
   fills it in was not a person. */
.gotcha { position: absolute; left: -9999px; opacity: 0; }

.contact-alt {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
  color: var(--ink-muted);
  font-size: 16px;
}

/* ── footer ──────────────────────────────────────────────────────────── */

.site-foot {
  margin-top: 84px;
  border-top: 1px solid var(--rule);
  padding: 34px 0 46px;
  color: var(--ink-subtle);
  font-size: 14px;
}
.site-foot-in {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  gap: 18px 26px;
  flex-wrap: wrap;
  align-items: center;
}
.site-foot a { color: var(--ink-muted); text-decoration: none; font-weight: 700; }
.site-foot a:hover { color: var(--ink); }
.site-foot .spacer { margin-left: auto; }

/* ── the sticky header vs the pitch page's sticky rail ───────────────── */

/* Two sticky things, one viewport top. The deck's section rail sticks at
 * 0.75rem, which was right when it was the only sticky element on the
 * page; with a site header above it the rail slid underneath and
 * disappeared — the header paints over it (z-index 40 against 20).
 *
 * The rail is moved down instead of the header being given way, because
 * the header has to stay reachable and the rail is a contents list that
 * reads fine a little lower.
 *
 * These heights are measured, not guessed: 75px with the nav on one row,
 * 121px when it wraps to two below 720px. Add or rename a nav item and
 * they want re-measuring — the failure is soft (the rail sits a few pixels
 * off) rather than broken, but it is worth knowing they are hand-set.
 */
:root { --head-h: 121px; }
@media (min-width: 720px) { :root { --head-h: 75px; } }

main .dock-rail { top: calc(var(--head-h) + 0.75rem); }

/* The rail's pill is opaque here too. It asks for blur(14px) behind an 86%
   wash, which looks like frosted glass when the blur lands — and when it
   does not, body copy reads straight through the menu at full sharpness,
   which is what was happening. Same fix as the header: the dock tint over
   solid ground, so the colour is unchanged and nothing shows through
   whether or not the browser obliges on the filter. */
main .dock {
  background: linear-gradient(var(--dock), var(--dock)), var(--ground);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Anchor jumps have to clear the header too, or a section lands with its
 * heading tucked behind the banner. The deck already sets these; both are
 * kept and the header's height added on top. */
main section[id] { scroll-margin-top: calc(var(--head-h) + 9rem); }

/* Under 34rem the deck stops sticking the rail and turns it into a plain
 * contents list, so only the anchor offset still matters here. */
@media (max-width: 34rem) {
  main section[id] { scroll-margin-top: calc(var(--head-h) + 1.5rem); }
}

/* The pitch page opens with its own "TourWell" wordmark, which made sense
   when it was a standalone deck. On the site the header three lines above
   already says it, and saying it twice reads as a mistake rather than as
   branding. Hidden rather than deleted from the source: docs/feature-set.html
   is still shared on its own, where the wordmark is the only one there is. */
main .lockup { display: none; }

/* ── wider than a phone ──────────────────────────────────────────────── */

@media (min-width: 720px) {
  .site-nav {
    order: 0;
    width: auto;
    margin-left: auto;
    margin-right: 8px;
  }
  .brand { margin-right: 0; }
  .site-head-in { padding: 14px 20px; flex-wrap: nowrap; }
}

/* Someone who has asked for less movement gets none of it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}