/* ─────────────────────────────────────────────────────────────────────────────
   BarnPilot, on the web.

   THE PALETTE IS NOT A SUGGESTION, IT IS THE ONE FROM THE APP:

     GOLD IS THE THING YOU WANT. SILVER IS THE STRUCTURE AROUND IT.
     NAVY IS THE GROUND.

   Gold is lettering and edges, never a large flat slab. Silver takes the jobs
   gold should not have: hairlines, structure, settled states. It is deliberately
   cool and slightly blue cast so that against the warm gold it reads as polished
   metal rather than as dead UI chrome. That blue cast is the entire trick.

   Values lifted verbatim from mobile/src/components/design-system/colors.ts so
   the site and the app can never drift into being cousins instead of twins.
   ───────────────────────────────────────────────────────────────────────────── */

@font-face { font-family: 'Inter'; src: url('../fonts/Inter-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: swap; }

:root {
  --navy-dark: #0D1C32;
  --navy-mid: #10233D;
  --navy-light: #1D3555;
  --gold: #C5A059;
  --gold-light: #FED488;
  --gold-dim: #785A1A;
  --silver: #B9C2D0;
  --silver-light: #EEF1F5;
  --silver-dim: #7C8798;
  --champagne: #D8C9A3;
  --ink: #191C1D;
  --ink-2: #44474D;
  --ink-3: #75777E;
  --paper: #FFFFFF;
  --paper-2: #F8F9FA;
  --rule: rgba(185, 194, 208, 0.28);
  --maxw: 1120px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ── The eyebrow: gold lettering, letterspaced, the app's own voice. ───────── */
.eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
  color: var(--gold-dim);
  text-transform: uppercase;
}
.on-navy .eyebrow { color: var(--gold); }

h1, h2, h3 { font-family: 'Montserrat', 'Inter', sans-serif; line-height: 1.12; letter-spacing: -0.4px; }
h1 { font-size: clamp(38px, 6vw, 68px); font-weight: 800; }
h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; }
h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.1px; }

p { color: var(--ink-2); }
.lede { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-2); }

a { color: inherit; }

/* ── Nav ──────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(13, 28, 50, 0.92);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid rgba(185, 194, 208, 0.16);
}
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { height: 30px; width: auto; display: block; }
.brand span {
  font-family: 'Montserrat', sans-serif; font-weight: 800;
  letter-spacing: 2.2px; font-size: 14px; color: var(--paper);
}
.nav-links { margin-left: auto; display: flex; gap: 26px; align-items: center; }
.nav-links a {
  text-decoration: none; font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,0.72); letter-spacing: 0.2px;
}
.nav-links a:hover { color: var(--gold); }
.nav-toggle { display: none; }

/* ── Buttons. Gold is lettering and an edge. Never a slab. ─────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px; border-radius: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--gold); color: var(--gold);
  background: transparent; cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.btn:hover { background: var(--gold); color: var(--navy-dark); }
.btn-solid { background: var(--gold); color: var(--navy-dark); border-color: var(--gold); }
.btn-solid:hover { background: var(--gold-light); border-color: var(--gold-light); color: var(--navy-dark); }
.btn-quiet { border-color: var(--silver-dim); color: var(--silver); }
.btn-quiet:hover { background: transparent; border-color: var(--silver); color: var(--paper); }

/* ── Sections ─────────────────────────────────────────────────────────────── */
section { padding: 96px 0; }
.on-navy { background: var(--navy-dark); color: var(--paper); }
.on-navy p { color: rgba(255,255,255,0.72); }
.on-navy h2 { color: var(--paper); }
.on-paper-2 { background: var(--paper-2); }

.section-head { max-width: 720px; margin-bottom: 52px; }
.section-head .eyebrow { margin-bottom: 14px; display: block; }
.section-head h2 { margin-bottom: 16px; }

/* A gold hairline, the app's underline motif. */
.rule-gold {
  width: 54px; height: 2px; background: var(--gold);
  margin: 18px 0 0; border-radius: 2px;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero {
  background:
    radial-gradient(1200px 520px at 78% 12%, rgba(197,160,89,0.14), transparent 62%),
    linear-gradient(180deg, var(--navy-dark) 0%, var(--navy-mid) 100%);
  color: var(--paper);
  padding: 104px 0 96px;
  position: relative; overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 56px; align-items: center; }
.hero h1 { color: var(--paper); margin: 18px 0 20px; }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero .lede { color: rgba(255,255,255,0.76); max-width: 560px; }
.hero-cta { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.hero-note {
  margin-top: 20px; font-size: 12px; color: var(--silver-dim);
  letter-spacing: 0.3px;
}

/* The horses from the app's own splash screen, flanking nothing, just standing
   there. Low opacity: they are the ground, not the message. */
/* NAVY HORSES ON A NAVY BACKGROUND. That was the bug, and it was invisible in
   the most literal way a bug can be: splash-horses@3x.png is a silhouette
   painted rgb(13,32,63), and .hero behind it is navy-dark → navy-mid. Same
   colour, 10% opacity, nothing to see. The image loaded every time. It was
   drawing correctly. It was drawing correctly in navy, onto navy.

   In the app that asset sits on navy on purpose and is meant to be nearly
   subliminal. A website hero is not a splash screen, and Scott asked for
   wallpaper he could actually see.

   brightness(0) invert(1) throws away the source colour entirely and repaints
   the shape pure white — so the file can be any colour it likes and we still
   get a clean silhouette. Then opacity alone decides how present it is. White
   at 9% over navy reads as a watermark in the wall: visible when you look,
   invisible when you're reading the headline. Silver is the structure, navy is
   the ground, and gold stays reserved for the words that matter. */
.hero-horses {
  position: absolute; right: -40px; bottom: -20px; width: 680px;
  opacity: 0.09; pointer-events: none; user-select: none;
  filter: brightness(0) invert(1);
}

/* ── The gilt frame, straight off the roster. ─────────────────────────────── */
.frame-shot { position: relative; aspect-ratio: 737 / 497; }
.frame-shot .art {
  position: absolute; left: 6%; right: 6%; top: 10%; bottom: 10%;
  background: linear-gradient(160deg, var(--navy-light), var(--navy-dark));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; overflow: hidden;
}
.frame-shot .gilt {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.frame-shot .art img { width: 46%; opacity: 0.9; }
.plaque {
  text-align: center;
}
.plaque .nm {
  font-family: 'Montserrat', sans-serif; font-weight: 800;
  letter-spacing: 3px; font-size: 13px; color: var(--gold);
}
.plaque .sub {
  font-size: 9px; letter-spacing: 1.6px; color: var(--silver);
  margin-top: 3px; text-transform: uppercase;
}

/* ── The principle band ───────────────────────────────────────────────────── */
.principle { text-align: center; }
.principle h2 { max-width: 900px; margin: 0 auto 22px; }
.principle h2 span { color: var(--gold); }
.principle p { max-width: 680px; margin: 0 auto 16px; font-size: 17px; }

/* ── Feature cards ────────────────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 12px; padding: 26px 24px;
  transition: border-color 160ms ease, transform 160ms ease;
}
.card:hover { border-color: var(--gold); transform: translateY(-2px); }
.card h3 { margin: 14px 0 8px; }
.card p { font-size: 14px; }
.card .ico {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--gold); border-radius: 8px; color: var(--gold-dim);
}
.card .ico svg { width: 17px; height: 17px; }

/* ── The split feature (weather) ──────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.quote-card {
  background: var(--navy-mid); border: 1px solid rgba(197,160,89,0.34);
  border-radius: 14px; padding: 28px;
}
.quote-card .k {
  font-size: 10px; font-weight: 800; letter-spacing: 1.6px;
  color: var(--silver-dim); text-transform: uppercase;
}
.quote-card .before {
  color: var(--silver); font-size: 17px; margin: 8px 0 22px;
  padding-bottom: 22px; border-bottom: 1px solid rgba(185,194,208,0.2);
}
.quote-card .after { color: var(--paper); font-size: 19px; font-weight: 600; margin-top: 8px; }
.quote-card .after b { color: var(--gold); font-weight: 700; }

/* ── The rest countdown ramp: silver, champagne, gold. A SEQUENCE. ────────── */
.ramp { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 26px; }
.plate {
  padding: 5px 11px; border-radius: 6px; border: 1px solid currentColor;
  font-size: 10px; font-weight: 800; letter-spacing: 1.1px;
}
.plate.far { color: var(--silver); }
.plate.closer { color: var(--champagne); }
.plate.almost { color: var(--gold); }
.plate.cleared { color: var(--gold); background: rgba(197,160,89,0.12); }

/* ── Audience columns ─────────────────────────────────────────────────────── */
.who { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.who-col {
  border-top: 2px solid var(--gold); padding-top: 22px;
}
.who-col h3 { margin-bottom: 10px; }
.who-col p { font-size: 14px; }
.who-col ul { margin: 14px 0 0; padding-left: 0; list-style: none; }
.who-col li {
  font-size: 13px; color: var(--ink-2); padding: 7px 0 7px 20px;
  position: relative; border-top: 1px solid var(--rule);
}
.who-col li:before {
  content: ''; position: absolute; left: 2px; top: 15px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
}

/* ── CTA band ─────────────────────────────────────────────────────────────── */
.cta { text-align: center; }
.cta h2 { margin-bottom: 14px; }
.cta .lede { color: rgba(255,255,255,0.72); max-width: 560px; margin: 0 auto 30px; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.foot { background: var(--navy-dark); color: rgba(255,255,255,0.6); padding: 56px 0 40px; border-top: 1px solid rgba(185,194,208,0.16); }
.foot-grid { display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; }
.foot-links { margin-left: auto; display: flex; gap: 30px; flex-wrap: wrap; }
.foot-links a { font-size: 13px; text-decoration: none; color: rgba(255,255,255,0.6); }
.foot-links a:hover { color: var(--gold); }
.foot small { display: block; margin-top: 34px; font-size: 12px; color: var(--silver-dim); }

/* ── Legal pages ──────────────────────────────────────────────────────────── */
.doc { max-width: 760px; margin: 0 auto; padding: 72px 24px 96px; }
.doc h1 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 10px; }
.doc .updated { font-size: 13px; color: var(--ink-3); margin-bottom: 40px; }
.doc h2 { font-size: 22px; margin: 44px 0 12px; }
.doc h3 { font-size: 16px; margin: 26px 0 8px; }
.doc p, .doc li { font-size: 15px; color: var(--ink-2); }
.doc ul { margin: 12px 0 12px 20px; }
.doc li { margin-bottom: 8px; }
.doc .callout {
  border-left: 2px solid var(--gold); background: var(--paper-2);
  padding: 18px 20px; margin: 24px 0; border-radius: 0 8px 8px 0;
}
.doc .callout p { margin: 0; }
.doc table { width: 100%; border-collapse: collapse; margin: 18px 0; }
.doc th, .doc td {
  text-align: left; padding: 11px 10px; font-size: 14px;
  border-bottom: 1px solid var(--rule); vertical-align: top;
}
.doc th { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold-dim); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  section { padding: 68px 0; }
  .hero-grid, .split { grid-template-columns: 1fr; gap: 40px; }
  .cards, .who { grid-template-columns: 1fr; }
  .hero-horses { display: none; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; position: absolute; top: 68px; left: 0; right: 0;
    background: var(--navy-mid); flex-direction: column; gap: 0;
    padding: 8px 24px 18px; border-bottom: 1px solid rgba(185,194,208,0.16);
  }
  .nav-links.open a { padding: 12px 0; border-top: 1px solid rgba(185,194,208,0.12); }
  .nav-toggle {
    display: grid; place-items: center; margin-left: auto;
    width: 38px; height: 38px; background: none; border: 1px solid rgba(185,194,208,0.3);
    border-radius: 8px; color: var(--silver); cursor: pointer;
  }
  .foot-links { margin-left: 0; }
}