/* ==========================================================================
   Vanlife Stuff: field-logbook design system
   Palette from the Stops & Stays badge: paper cream, warm ink, sunset
   orange, deep teal, and the app's night-cockpit dark for UI references.
   Type: Fraunces (display) / Outfit (text) / IBM Plex Mono (data).
   ========================================================================== */

:root {
  --paper: #f7f1e6;
  --paper-deep: #efe6d4;
  --ink: #26221a;
  --ink-soft: #57503f;
  --line: #c9bda2;
  --sunset: #d4571c;
  --sunset-deep: #b04212;
  --teal: #1d5c5a;
  --teal-deep: #123d3c;
  --night: #14161a;
  --night-panel: #1b1e24;
  --night-line: #2c313a;
  --app-green: #4ade80;
  --app-blue: #60a5fa;
  --cream-text: #f3ead9;

  --f-display: "Fraunces", Georgia, serif;
  --f-text: "Outfit", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;

  --shadow: 6px 6px 0 rgba(38, 34, 26, 0.16);
  --shadow-sm: 4px 4px 0 rgba(38, 34, 26, 0.14);
  --r: 10px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--teal); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--sunset-deep); }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
h3 { font-size: 1.3rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 16px;
}
.skip:focus { left: 0; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: 760px; }

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
  position: sticky; top: 0; z-index: 50;
}
.topbar__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 68px;
}
.brand {
  display: flex; align-items: center;
  text-decoration: none; color: var(--ink);
  position: relative; z-index: 2;
}
/* The wordmark stands taller than the bar and hangs past the bottom border
   onto the page. The negative margin keeps it out of the flex row's height,
   so the bar stays 68px and only the artwork overhangs. */
.brand__logo {
  display: block; width: auto; height: 96px; margin-bottom: -30px;
  aspect-ratio: 5 / 2;
  /* Tight light rim first: the artwork's own outline is dark, and the part
     that overhangs lands on dark heroes where it would otherwise vanish.
     The soft dark shadow underneath lifts it off pale pages. */
  filter: drop-shadow(0 0 2px rgba(255, 252, 245, 0.55))
          drop-shadow(0 5px 10px rgba(38, 34, 26, 0.3));
  transition: transform 0.16s ease, filter 0.16s ease;
}
.brand:hover .brand__logo {
  transform: translateY(-1px);
  filter: drop-shadow(0 0 2px rgba(255, 252, 245, 0.55))
          drop-shadow(0 8px 15px rgba(38, 34, 26, 0.4));
}
@media (prefers-reduced-motion: reduce) {
  .brand__logo, .brand:hover .brand__logo { transition: none; transform: none; }
}

.mainnav { display: flex; align-items: center; gap: 26px; }
.mainnav__link {
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.98rem;
  padding: 4px 0; border-bottom: 2px solid transparent;
}
.mainnav__link:hover { color: var(--sunset-deep); }
.mainnav__link.active { border-bottom-color: var(--sunset); }
.mainnav__cta { margin-left: 6px; }
/* --------------------------------------------------------------------------
   Official store badges (Google Play + Apple App Store)
   Artwork is Google's and Apple's own files, unaltered. Apple's SVG is
   edge-to-edge; Google's PNG ships with built-in clear space baked in, so the
   Google badge is scaled up 1.4881x and its transparent margin pulled back,
   which makes the two visible badges the same height.
   -------------------------------------------------------------------------- */
.storebadges { --badge-h: 50px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.storebadges--sm { --badge-h: 30px; gap: 10px; }
.storebadge { display: inline-block; line-height: 0; transition: transform 0.12s ease, opacity 0.12s ease; }
.storebadge:hover { transform: translateY(-2px); opacity: 0.86; }
.storebadge img { display: block; width: auto; }
.storebadge--apple img { height: var(--badge-h); }
.storebadge--google img { height: calc(var(--badge-h) * 1.4881); margin: calc(var(--badge-h) * -0.244); }
@media (max-width: 700px) { .storebadges:not(.storebadges--sm) { --badge-h: 44px; } }
@media (min-width: 881px) and (max-width: 1060px) {
  .mainnav { gap: 17px; }
  .mainnav__link { font-size: 0.92rem; }
  .mainnav__cta { margin-left: 2px; }
}

.navtoggle {
  display: none; background: none; border: 2px solid var(--ink);
  border-radius: 8px; padding: 9px 10px; cursor: pointer;
}
.navtoggle span:not(.visually-hidden) {
  display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px 0;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--f-text); font-weight: 600; font-size: 1rem;
  text-decoration: none; text-align: center;
  padding: 13px 26px; border-radius: 8px;
  border: 2px solid var(--ink);
  color: var(--ink); background: var(--paper);
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  cursor: pointer;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(38,34,26,0.2); color: var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(38,34,26,0.2); }
.btn--primary { background: var(--sunset); border-color: var(--ink); color: #fff; }
.btn--primary:hover { color: #fff; background: var(--sunset-deep); }
.btn--teal { background: var(--teal); color: #fff; }
.btn--teal:hover { color: #fff; background: var(--teal-deep); }
.btn--sm { padding: 8px 16px; font-size: 0.9rem; box-shadow: 3px 3px 0 rgba(38,34,26,0.14); }
.btn--lg { padding: 16px 34px; font-size: 1.1rem; }

/* --------------------------------------------------------------------------
   Kickers, stamps, dividers
   -------------------------------------------------------------------------- */
.kicker {
  font-family: var(--f-mono); font-size: 0.78rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--sunset-deep);
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 14px;
}
.kicker::before { content: ""; width: 34px; height: 2px; background: var(--sunset); }
.kicker--center { justify-content: center; }
.kicker--center::after { content: ""; width: 34px; height: 2px; background: var(--sunset); }

.stamp {
  display: inline-block;
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--teal-deep);
  border: 2px dashed var(--teal);
  border-radius: 999px; padding: 6px 14px;
  transform: rotate(-2deg);
  background: rgba(29, 92, 90, 0.06);
}

.route-div {
  border: none; height: 14px; margin: 0;
  background-image: linear-gradient(90deg, var(--ink) 55%, transparent 45%);
  background-size: 22px 2px; background-repeat: repeat-x; background-position: 0 center;
  position: relative; opacity: 0.5;
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.sec { padding: 72px 0; }
.sec--tight { padding: 44px 0; }
.sec--paperdeep { background: var(--paper-deep); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.sec--night { background: var(--night); color: #d8dce3; }
.sec--night h2, .sec--night h3 { color: #fff; }
.sec--night .kicker { color: var(--app-green); }
.sec--night .kicker::before, .sec--night .kicker--center::after { background: var(--app-green); }
.sec--teal { background: var(--teal-deep); color: var(--cream-text); }
.sec--teal h2 { color: #fff; }
.sec--teal .kicker { color: #9fd8c9; }
.sec--teal .kicker::before, .sec--teal .kicker--center::after { background: #9fd8c9; }

.lede { font-size: 1.22rem; line-height: 1.6; color: var(--ink-soft); max-width: 46ch; }
.sec--night .lede, .sec--teal .lede { color: inherit; opacity: 0.85; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { padding: 84px 0 72px; overflow: hidden; }
.hero__grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center;
}
.hero h1 { margin-bottom: 20px; }
.hero h1 em { font-style: italic; color: var(--sunset); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; align-items: center; }
.hero__note { font-family: var(--f-mono); font-size: 0.8rem; color: var(--ink-soft); margin-top: 14px; }

/* --------------------------------------------------------------------------
   Log card: a Stops & Stays entry, drawn in the app's night UI
   -------------------------------------------------------------------------- */
.logstack { display: grid; gap: 16px; }
.logcard {
  background: var(--night-panel);
  border: 1px solid var(--night-line);
  border-radius: 14px;
  color: #e5e7eb;
  padding: 18px 20px;
  box-shadow: var(--shadow);
  max-width: 430px;
}
.logcard--tilt1 { transform: rotate(-1.4deg); }
.logcard--tilt2 { transform: rotate(1.1deg); margin-left: 34px; }
.logcard__top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em;
  color: #8b93a1; text-transform: uppercase; margin-bottom: 8px;
}
.logcard__type { color: var(--app-green); }
.logcard__name { font-weight: 600; font-size: 1.05rem; color: #fff; margin: 0 0 4px; font-family: var(--f-text); }
.logcard__coords { font-family: var(--f-mono); font-size: 0.8rem; color: var(--app-blue); margin: 0 0 12px; }
.logcard__meta {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-family: var(--f-mono); font-size: 0.74rem; color: #9ca3af;
}
.logcard__meta strong { color: #e5e7eb; font-weight: 500; }

.dots { display: inline-flex; gap: 3px; vertical-align: middle; }
.dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #3a4048; display: inline-block;
}
.dots i.on { background: var(--app-green); }
.dots--amber i.on { background: #fbbf24; }
.dots--blue i.on { background: var(--app-blue); }

.gauge { display: grid; gap: 6px; margin-top: 12px; }
.gauge__row { display: grid; grid-template-columns: 92px 1fr 40px; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 0.72rem; color: #9ca3af; }
.gauge__bar { height: 8px; border-radius: 4px; background: #2c313a; overflow: hidden; }
.gauge__bar i { display: block; height: 100%; background: var(--app-green); border-radius: 4px; }
.gauge__bar i.warn { background: #fbbf24; }
.gauge__bar i.low { background: #ef4444; }

/* --------------------------------------------------------------------------
   Feature cards / waypoint index
   -------------------------------------------------------------------------- */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

.fcard {
  display: block; text-decoration: none; color: var(--ink);
  background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r);
  padding: 26px 26px 22px; box-shadow: var(--shadow-sm);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  position: relative;
}
.fcard:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); color: var(--ink); }
.fcard__wp {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.16em;
  color: var(--sunset-deep); text-transform: uppercase; display: block; margin-bottom: 10px;
}
.fcard h3 { margin-bottom: 8px; }
.fcard p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.fcard__go {
  font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.1em;
  color: var(--teal); display: inline-block; margin-top: 14px; text-transform: uppercase;
}
.fcard:hover .fcard__go { color: var(--sunset-deep); }

.sec--night .fcard { background: var(--night-panel); border-color: var(--night-line); color: #e5e7eb; box-shadow: 4px 4px 0 rgba(0,0,0,0.4); }
.sec--night .fcard h3 { color: #fff; }
.sec--night .fcard p { color: #9ca3af; }

/* --------------------------------------------------------------------------
   Prose (feature articles, guides)
   -------------------------------------------------------------------------- */
.crumbs {
  font-family: var(--f-mono); font-size: 0.76rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 26px;
}
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--sunset-deep); }

.prose { max-width: 68ch; }
.prose p { margin: 0 0 1.2em; }
.prose h2 { margin-top: 1.8em; display: flex; align-items: baseline; gap: 14px; }
.prose h2 .wp {
  font-family: var(--f-mono); font-size: 0.85rem; font-weight: 500;
  color: var(--sunset-deep); letter-spacing: 0.1em; white-space: nowrap;
}
.prose h3 { margin-top: 1.5em; }
.prose ul { padding-left: 0; list-style: none; margin: 0 0 1.2em; }
.prose ul li { padding-left: 26px; position: relative; margin-bottom: 0.55em; }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 13px; height: 2px; background: var(--sunset);
}
.prose ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.prose ol li { margin-bottom: 0.55em; }

.fieldnote {
  border: 2px dashed var(--teal); border-radius: var(--r);
  background: rgba(29, 92, 90, 0.05);
  padding: 20px 24px; margin: 1.6em 0;
}
.fieldnote__label {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--teal-deep); display: block; margin-bottom: 6px;
}
.fieldnote p { margin: 0; }
.fieldnote p + p { margin-top: 0.8em; }

/* --------------------------------------------------------------------------
   Comparison table (Free vs Pro)
   -------------------------------------------------------------------------- */
.cmp { width: 100%; border-collapse: collapse; border: 2px solid var(--ink); background: var(--paper); box-shadow: var(--shadow-sm); }
.cmp th, .cmp td { padding: 13px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cmp thead th {
  background: var(--ink); color: var(--paper);
  font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500;
}
.cmp tbody tr:last-child td { border-bottom: none; }
.cmp td.c { text-align: center; }
.tick { color: var(--teal); font-weight: 700; }
.cross { color: var(--ink-soft); font-weight: 700; }
.muted { color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Product cards (gear section)
   -------------------------------------------------------------------------- */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.product {
  border: 2px solid var(--ink); border-radius: var(--r); background: #fffdf8;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.product__img {
  background: #fff; display: flex; align-items: center; justify-content: center;
  padding: 22px; min-height: 170px; border-bottom: 1.5px solid var(--line);
}
.product__img img { max-height: 140px; width: auto; }
.product__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.product__name { font-weight: 600; font-size: 1rem; line-height: 1.35; margin: 0 0 6px; font-family: var(--f-text); }
.product__price { font-family: var(--f-mono); font-size: 0.86rem; color: var(--sunset-deep); margin: 0 0 10px; }
.product__note { font-size: 0.92rem; color: var(--ink-soft); margin: 0 0 16px; flex: 1; }
.product .btn { align-self: flex-start; }

.pricenote {
  font-family: var(--f-mono); font-size: 0.74rem; color: var(--ink-soft); margin-top: 22px;
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.cta-band { background: var(--sunset); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); color: #fff; padding: 60px 0; }
.cta-band h2 { color: #fff; margin-bottom: 10px; }
.cta-band p { color: #ffe8d6; max-width: 52ch; }
.cta-band .btn { background: var(--paper); color: var(--ink); }
.cta-band .btn--dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cta-band__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }

/* --------------------------------------------------------------------------
   Forms (iOS notify, contact)
   -------------------------------------------------------------------------- */
.field { margin-bottom: 18px; }
.field label {
  display: block; font-family: var(--f-mono); font-size: 0.74rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 7px;
}
.field input[type="text"], .field input[type="email"], .field textarea {
  width: 100%; padding: 12px 14px;
  border: 2px solid var(--ink); border-radius: 8px;
  background: #fffdf8; font-family: var(--f-text); font-size: 1rem; color: var(--ink);
}
.field input:focus, .field textarea:focus { outline: 3px solid rgba(212, 87, 28, 0.35); }
.form-msg { font-weight: 600; margin-top: 14px; }
.form-msg.ok { color: var(--teal-deep); }
.form-msg.err { color: var(--sunset-deep); }
.hp { position: absolute; left: -5000px; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
details.faq {
  border: 2px solid var(--ink); border-radius: var(--r); background: var(--paper);
  margin-bottom: 14px; box-shadow: var(--shadow-sm);
}
details.faq summary {
  cursor: pointer; font-weight: 600; padding: 16px 20px; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; font-family: var(--f-mono); font-size: 1.2rem; color: var(--sunset); }
details.faq[open] summary::after { content: "–"; }
details.faq .faq__body { padding: 0 20px 18px; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { background: var(--night); color: #aab2bd; padding: 56px 0 30px; border-top: 2px solid var(--ink); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 40px; }
.footer__brand img { border-radius: 50%; margin-bottom: 14px; }
.footer__brand p { font-size: 0.92rem; margin: 0; }
.footer__brand strong { color: #e5e7eb; }
.footer__col h3 {
  font-family: var(--f-mono); font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--app-green); margin-bottom: 14px;
}
.footer__col a { display: block; color: #cdd3db; text-decoration: none; padding: 4px 0; font-size: 0.95rem; }
.footer__col a:hover { color: #fff; }
.footer__legal {
  border-top: 1px solid var(--night-line); padding-top: 22px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  font-size: 0.83rem; font-family: var(--f-mono);
}
.footer__legal p { margin: 0; }
.footer__tm { font-size: 0.78rem; opacity: 0.72; max-width: 62ch; }

/* --------------------------------------------------------------------------
   Page hero (interior pages)
   -------------------------------------------------------------------------- */
/* Top padding only needs to clear the overhanging header logo (~27px on
   desktop, ~22px on mobile) plus a little breathing room. */
.pagehead { padding: 28px 0 46px; }
.pagehead--night { background: var(--night); color: #d8dce3; border-bottom: 2px solid var(--ink); }
.pagehead--night h1 { color: #fff; }
.pagehead--night .crumbs, .pagehead--night .crumbs a { color: #8b93a1; }
.pagehead--night .kicker { color: var(--app-green); }
.pagehead--night .kicker::before { background: var(--app-green); }
.pagehead--night .lede { color: #aab2bd; }

/* --------------------------------------------------------------------------
   Misc
   -------------------------------------------------------------------------- */
.statrow { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 36px; }
.stat { min-width: 130px; }
.stat b { display: block; font-family: var(--f-display); font-size: 2rem; font-weight: 700; color: var(--ink); }
.sec--night .stat b, .sec--teal .stat b { color: #fff; }
.stat span { font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.sec--night .stat span { color: #8b93a1; }
.sec--teal .stat span { color: #9fd8c9; }

.imgframe { border: 2px solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; background: #fff; }
.center { text-align: center; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .grid3, .product-grid { grid-template-columns: 1fr 1fr; }
  .hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* Nav collapses to the hamburger early: the header carries two store buttons */
@media (max-width: 880px) {
  .navtoggle { display: block; }
  .mainnav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper); border-bottom: 2px solid var(--ink);
    flex-direction: column; align-items: flex-start; gap: 0; padding: 10px 24px 20px;
  }
  .mainnav.open { display: flex; z-index: 3; }
  .mainnav__link { padding: 12px 0; font-size: 1.05rem; width: 100%; }
  .mainnav__cta { margin: 12px 0 0; }
  .mainnav__cta.storebadges--sm { --badge-h: 40px; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .brand__logo { height: 78px; margin-bottom: -38px; }
  .sec { padding: 52px 0; }
  .grid2, .grid3, .product-grid { grid-template-columns: 1fr; }
  .logcard--tilt2 { margin-left: 12px; }

  .footer__grid { grid-template-columns: 1fr; }
  .cmp th, .cmp td { padding: 10px 12px; font-size: 0.9rem; }
}

/* --------------------------------------------------------------------------
   Scene imagery (SVG illustration in the badge palette)
   -------------------------------------------------------------------------- */
.hero--scene {
  position: relative;
  background: url("../img/motorhome-trip-log-app-highland-loch-parkup.webp") center / cover no-repeat, var(--night);
  border-bottom: 2px solid var(--ink);
  padding: 96px 0 88px;
}
.hero--scene::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(18, 13, 19, 0.88) 0%, rgba(18, 13, 19, 0.72) 38%, rgba(18, 13, 19, 0.18) 68%, rgba(18, 13, 19, 0) 100%);
}
.hero--scene .wrap { position: relative; }
.hero--scene h1 { color: #fff; }
.hero--scene h1 em { color: #f6a93c; }
.hero--scene .lede { color: #f3e8d5; opacity: 0.94; }
.hero--scene .kicker { color: #ffc76e; }
.hero--scene .kicker::before { background: #ffc76e; }
.hero--scene .hero__note { color: #d9c9ae; }
.hero--scene .btn { border-color: #0c0a0e; }

.pagehead--scene { position: relative; border-bottom: 2px solid var(--ink); color: #e6e1d4; }
.pagehead--scene::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(96deg, rgba(14, 11, 16, 0.9) 0%, rgba(14, 11, 16, 0.72) 45%, rgba(14, 11, 16, 0.3) 100%);
}
.pagehead--scene .wrap { position: relative; }
.pagehead--scene h1 { color: #fff; }
.pagehead--scene .lede { color: #ede4d2; opacity: 0.92; }
.pagehead--scene .crumbs, .pagehead--scene .crumbs a { color: #c9bda2; }
.pagehead--scene .kicker { color: #ffc76e; }
.pagehead--scene .kicker::before { background: #ffc76e; }
.pagehead--scene .stamp { color: #9fd8c9; border-color: #9fd8c9; background: rgba(16, 42, 40, 0.4); }

.pagehead--scene-night { background: url("../img/scene-night.svg") center / cover no-repeat, var(--night); }
.pagehead--scene-road  { background: url("../img/scene-road.svg") center / cover no-repeat, var(--teal-deep); }
.pagehead--scene-hero  { background: url("../img/scene-hero.svg") center 65% / cover no-repeat, var(--night); }

.scenebreak {
  display: block; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  height: 300px;
  background: url("../img/campervan-logbook-app-moorland-road-aerial.webp") center / cover no-repeat, var(--teal-deep);
}
/* One large hero file serves every width on purpose. A small landscape variant
   was tried and removed: on narrow screens the hero stacks into a TALL PORTRAIT
   box (about 626x1575), and `cover` then scales a 3:1 landscape image by ~4.3x
   to fill the height, which looked badly blurred. The full-size file is 1448px
   tall, so the same box needs only ~1.09x. It is 212KB, which is cheap because
   the image is mostly smooth sky and water. */
@media (max-width: 700px) {
  .scenebreak { height: 190px; background-image: url("../img/campervan-logbook-app-moorland-road-aerial-1400.webp"); }
}

/* --------------------------------------------------------------------------
   Share bar
   -------------------------------------------------------------------------- */
.sharebar-sec { padding: 0 0 56px; }
.sharebar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  border: 2px dashed var(--line); border-radius: var(--r); padding: 16px 20px;
}
.sharebar__label {
  font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-soft); margin-right: 8px;
}
.sharebar a, .sharebar__copy {
  font-family: var(--f-text); font-weight: 600; font-size: 0.88rem;
  color: var(--teal); background: none; border: 2px solid var(--teal);
  border-radius: 999px; padding: 6px 16px; text-decoration: none; cursor: pointer;
}
.sharebar a:hover, .sharebar__copy:hover { color: #fff; background: var(--teal); }
.sharebar__copy.copied { color: #fff; background: var(--sunset); border-color: var(--sunset); }

/* --------------------------------------------------------------------------
   App screenshots
   -------------------------------------------------------------------------- */
.screens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 40px; align-items: start; }
.phone {
  background: #0c0e12; border: 2px solid var(--night-line); border-radius: 26px;
  padding: 12px; box-shadow: var(--shadow);
}
.phone img { display: block; width: 100%; border-radius: 16px; }
.phone__label {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: #8b93a1; text-align: center; padding: 12px 4px 4px; margin: 0;
}
@media (max-width: 700px) { .screens { grid-template-columns: 1fr; max-width: 300px; margin-left: auto; margin-right: auto; } }

.phone--float { float: right; width: 250px; margin: 0 0 24px 34px; }
@media (max-width: 700px) { .phone--float { float: none; width: 230px; margin: 0 auto 28px; } }

/* --------------------------------------------------------------------------
   Homepage-only treatments: bigger hero, ticker band, fanned screenshots
   -------------------------------------------------------------------------- */
.hero--scene { min-height: 72vh; display: flex; align-items: center; }
.hero--scene h1 { font-size: clamp(2.9rem, 7vw, 5.2rem); text-shadow: 0 2px 24px rgba(0,0,0,0.45); }
.hero--scene .lede { font-size: 1.3rem; max-width: 50ch; text-shadow: 0 1px 12px rgba(0,0,0,0.5); }
.hero--scene .btn--lg { padding: 18px 38px; font-size: 1.15rem; }

.hero__collage { position: relative; min-height: 460px; }
.hero__collage .phone {
  width: 250px; margin: 0; transform: rotate(4deg);
  position: absolute; right: 8%; top: 0;
  box-shadow: 14px 14px 0 rgba(0,0,0,0.35);
}
.hero__collage .logcard {
  position: absolute; left: 0; bottom: 6%; max-width: 340px;
  transform: rotate(-2.5deg);
}
@media (max-width: 960px) {
  .hero--scene { min-height: 0; }
  .hero__collage { min-height: 0; display: flex; flex-direction: column; gap: 18px; align-items: center; }
  .hero__collage .phone, .hero__collage .logcard { position: static; }
}

.ticker {
  background: var(--sunset); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  overflow: hidden; padding: 13px 0; white-space: nowrap;
}
.ticker__track {
  display: inline-block; white-space: nowrap;
  font-family: var(--f-mono); font-size: 0.86rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: #fff;
  animation: ticker 38s linear infinite;
}
.ticker__track span { margin: 0 18px; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

.screens--fan { align-items: center; }
.screens--fan .phone { transition: transform 0.25s ease; }
.screens--fan .phone:nth-child(1) { transform: rotate(-4deg) translateY(14px); }
.screens--fan .phone:nth-child(2) { transform: rotate(1deg) translateY(-10px) scale(1.05); z-index: 2; position: relative; }
.screens--fan .phone:nth-child(3) { transform: rotate(4deg) translateY(14px); }
.screens--fan .phone:hover { transform: rotate(0) translateY(-6px) scale(1.06); z-index: 3; position: relative; }

/* Large app-store logo badge: home hero + The App page */
.brandmark { margin: 0 0 26px; }
.brandmark img { width: 172px; height: auto; display: block; filter: drop-shadow(0 10px 26px rgba(0,0,0,0.45)); }
.brandmark--center { text-align: center; }
.brandmark--center img { margin-left: auto; margin-right: auto; }
@media (max-width: 720px) { .brandmark img { width: 138px; } .brandmark--center { text-align: center; } }

/* Home hero: logo as a badge overlapping the screenshot stack */
.hero__collage .brandmark { position: absolute; z-index: 4; margin: 0; right: 40%; top: 2%; width: 210px; transform: rotate(-4deg); }
.hero__collage .brandmark img { width: 210px; filter: drop-shadow(0 10px 22px rgba(0,0,0,0.55)); }
@media (max-width: 960px) {
  .hero__collage .brandmark { position: static; transform: none; width: 160px; margin: 4px auto 0; }
  .hero__collage .brandmark img { width: 160px; }
}
/* The App page: logo floated beside the intro paragraph */
.pagehead .brandmark--float { float: right; width: 205px; margin: 4px 7% 16px 34px; }
.pagehead .brandmark--float img { width: 205px; }
@media (max-width: 720px) { .pagehead .brandmark--float { float: none; margin: 0 0 18px; } }

/* Pro stamp visibility on dark feature-page headers */
.pagehead--night .stamp { color: #9fd8c9; border-color: #9fd8c9; background: rgba(16, 42, 40, 0.4); }

/* About page: angled snapshot photo card (placeholder until real photo dropped in) */
.snapshot { float: right; width: 330px; margin: 6px 0 22px 38px; background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r); padding: 12px 12px 8px; box-shadow: var(--shadow); transform: rotate(2.4deg); }
.snapshot img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line); }
.snapshot figcaption { font-family: var(--f-mono); font-size: 0.76rem; letter-spacing: 0.04em; color: var(--ink-soft); text-align: center; margin-top: 9px; }
@media (max-width: 700px) { .snapshot { float: none; width: 260px; margin: 0 auto 26px; transform: rotate(1.6deg); } }

/* About page: trio of angled, overlapping snapshot cards */
.trio { display: flex; justify-content: center; align-items: flex-start; clear: both; margin: 34px 0 10px; }
.trio figure { width: 208px; margin: 0; background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r); padding: 10px 10px 6px; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; }
.trio figure:nth-child(1) { transform: rotate(-3.5deg); z-index: 1; }
.trio figure:nth-child(2) { transform: rotate(1.6deg); margin: 10px -20px 0; z-index: 3; }
.trio figure:nth-child(3) { transform: rotate(3.2deg); z-index: 2; }
.trio figure:hover { transform: rotate(0) translateY(-6px); box-shadow: var(--shadow); z-index: 4; }
.trio img { display: block; width: 100%; height: auto; border-radius: 5px; border: 1px solid var(--line); }
.trio figcaption { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.03em; text-align: center; color: var(--ink-soft); margin-top: 8px; }
.trio a { display: block; color: inherit; text-decoration: none; }
.trio a:hover figcaption { color: var(--sunset-deep); }
@media (max-width: 700px) { .trio { flex-wrap: wrap; gap: 16px; } .trio figure { width: 190px; margin: 0 !important; transform: rotate(0) !important; } }