/* =========================================================================
   Pastorix — Colors & Type
   Traditional ranching meets precision technology.
   ========================================================================= */

/* ---------- Fonts ------------------------------------------------------- */
@font-face {
  font-family: "JetBrains Mono";
  font-weight: 300;
  font-style: normal;
  src: url("../fonts/JetBrainsMono-Light.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/JetBrainsMono-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  font-weight: 400;
  font-style: italic;
  src: url("../fonts/JetBrainsMono-Italic.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  font-weight: 500;
  font-style: normal;
  src: url("../fonts/JetBrainsMono-Medium.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  font-weight: 600;
  font-style: normal;
  src: url("../fonts/JetBrainsMono-SemiBold.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  font-weight: 700;
  font-style: normal;
  src: url("../fonts/JetBrainsMono-Bold.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  font-weight: 800;
  font-style: normal;
  src: url("../fonts/JetBrainsMono-ExtraBold.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Liberation Sans";
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/LiberationSans-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Liberation Sans";
  font-weight: 400;
  font-style: italic;
  src: url("../fonts/LiberationSans-Italic.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Liberation Sans";
  font-weight: 700;
  font-style: normal;
  src: url("../fonts/LiberationSans-Bold.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Liberation Sans";
  font-weight: 700;
  font-style: italic;
  src: url("../fonts/LiberationSans-BoldItalic.ttf") format("truetype");
  font-display: swap;
}

/* ---------- Tokens ------------------------------------------------------ */
:root {
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-sans: "Liberation Sans", Arial, Helvetica, sans-serif;

  --canvas: #FFFFFF;
  --canvas-warm: #F5F0EA;
  --ink: #1F1F1F;
  --ink-soft: #3B3B3B;
  --ink-mute: #6B6B6B;

  --earth-01: #955B20;
  --earth-02: #CB7C2B;
  --earth-03: #563414;
  --earth-04: #FBB16C;
  --earth-05: #FEDEC1;

  --sky-01: #5286DD;
  --sky-02: #3A6FD3;
  --sky-03: #20449C;
  --sky-04: #77A2EA;
  --sky-05: #C9D8F3;

  --field-01: #3DAE5F;
  --field-02: #2C8144;
  --field-03: #65E28A;
  --field-04: #1F562E;
  --field-05: #D1FAD7;

  --sun-01: #D9FF00;

  --grid-line: rgba(31, 31, 31, 0.08);
  --grid-unit: 30px;
  --grid-macro: 120px;

  --border-hair: 0.5px solid var(--grid-line);
  --border-thin: 1px solid rgba(31, 31, 31, 0.12);
  --border-ink:  1.5px solid var(--ink);

  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;

  --fs-eyebrow: 11px;
  --fs-body-sm: 13px;
  --fs-body:    15px;
  --fs-body-lg: 18px;
  --fs-h3:      20px;
  --fs-h2:      28px;
  --fs-h1:      48px;
  --fs-display: 72px;
  --fs-stat:    96px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.65;

  --track-eyebrow: 0.14em;
  --track-caps:    0.08em;
  --track-tight:   -0.01em;
}

/* ---------- Reset & base ----------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  max-width: 1440px;
  margin: 0 auto;
  overflow-x: hidden;
}

html { scroll-behavior: smooth; }
a { color: inherit; }
img { display: block; max-width: 100%; }
input:focus, textarea:focus { outline: none; }

/* ---------- Semantic type ---------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--earth-01);
  line-height: 1;
}

h1, .h1 {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--earth-01);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  color: var(--earth-01);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--ink);
  margin: 0;
}

.stat {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-stat);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--earth-01);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--ink);
  text-wrap: pretty;
}

.body-featured {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  color: var(--earth-02);
}

.mono { font-family: var(--font-mono); }
.sans { font-family: var(--font-sans); }

.h-earth { color: var(--earth-01); }
.h-sky   { color: var(--sky-03);   }
.h-field { color: var(--field-02); }
.h-ink   { color: var(--ink);      }

/* ---------- Grid backdrop ---------------------------------------------- */
.grid-bg {
  background-image:
    linear-gradient(to right,  var(--grid-line) 0.5px, transparent 0.5px),
    linear-gradient(to bottom, var(--grid-line) 0.5px, transparent 0.5px);
  background-size: var(--grid-unit) var(--grid-unit);
}
.grid-bg-macro {
  background-image:
    linear-gradient(to right,  var(--grid-line) 0.5px, transparent 0.5px),
    linear-gradient(to bottom, var(--grid-line) 0.5px, transparent 0.5px);
  background-size: var(--grid-macro) var(--grid-macro);
}

/* ---------- Components -------------------------------------------------- */
.btn-cta {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  background: var(--sky-02);
  color: #fff;
  border: 0;
  padding: 14px 22px;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background 120ms ease, transform 80ms ease;
}
.btn-cta:hover  { background: var(--sky-03); }
.btn-cta:active { transform: translateY(1px); }

.btn-ghost {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  padding: 12px 20px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.btn-ghost:hover { background: var(--ink); color: var(--canvas); }

.btn-waitlist {
  font-family: var(--font-mono); font-weight: 600; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--field-01); color: #fff; text-decoration: none;
  padding: 11px 18px; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 120ms ease, transform 80ms ease;
  border: 0;
}
.btn-waitlist:hover  { background: var(--field-02); }
.btn-waitlist:active { transform: translateY(1px); }

.panel-tech {
  background: var(--sky-05);
  color: var(--sky-03);
  padding: 28px 32px;
  border-radius: var(--radius-xs);
}

.panel-benefit {
  background: var(--field-05);
  color: var(--field-04);
  padding: 28px 32px;
  border-radius: var(--radius-xs);
}

.panel-pastorix {
  background: var(--earth-04);
  color: var(--earth-03);
  padding: 28px 32px;
}
.panel-current {
  background: var(--canvas-warm);
  color: var(--ink-soft);
  padding: 28px 32px;
}

.highlight-oval {
  position: relative;
  display: inline-block;
  padding: 0.05em 0.4em;
}
.highlight-oval::before {
  content: "";
  position: absolute;
  inset: -6px -10px -4px -10px;
  border: 1.5px dashed var(--earth-02);
  border-radius: 50%;
  transform: rotate(-1.2deg);
  pointer-events: none;
}

.photo-offset {
  transform: rotate(-3deg) translate(-8px, 4px);
  transform-origin: left center;
  box-shadow: 0 1px 0 rgba(31, 31, 31, 0.04);
}
.photo-offset.cw { transform: rotate(2deg) translate(6px, -2px); }

.rule      { border: 0; border-top: 1px   solid var(--ink); margin: 0; }
.rule-hair { border: 0; border-top: 0.5px solid var(--grid-line); margin: 0; }

/* ---------- Responsive ------------------------------------------------- */
/* The design is a 1440px desktop canvas. At narrow widths we stack grids
   and trim horizontal padding so content stays readable without redesigning
   every section. */
@media (max-width: 1000px) {
  .stack-sm { grid-template-columns: 1fr !important; gap: 40px !important; }
  .pad-sm   { padding-left: 24px !important; padding-right: 24px !important; }
  .pad-sm-y { padding-top: 80px !important; padding-bottom: 80px !important; }
  .h-fluid  { font-size: clamp(32px, 7vw, 46px) !important; }
  .h-hero   { font-size: clamp(34px, 8vw, 60px) !important; }
  .bleed-off { margin-left: 0 !important; margin-right: 0 !important; }
  .hide-sm  { display: none !important; }

  /* Hero: the left-56% gradient only darkens the left half of the image.
     On narrow viewports the headline stretches full width, so the right
     half ends up on the bright sunrise with no legibility. Replace with a
     full-width darkening veil. */
  .hero-veil {
    width: 100% !important;
    background: rgba(20,14,8,0.72) !important;
  }

  /* Problem section: the 3-up grid uses `gap: 1` plus a translucent brown
     parent background to draw 1px dividers between cards. When stack-sm
     flips gap to 40px, that brown shows through as a thick horizontal bar.
     Null it out on stacked layout and use per-card borders instead. */
  .divide-sm {
    gap: 0 !important;
    background: transparent !important;
    border-top: none !important;
    border-bottom: none !important;
  }
  .divide-sm > * + * { border-top: 0.5px solid var(--grid-line); }

  /* Results bleed-off panels: a fixed 340px parent height + rotations +
     overflow:hidden clip content at the viewport edge on narrow screens.
     Drop the fixed height, rotation, and shift on small; let each panel
     size to its content. */
  .bleed-off {
    height: auto !important;
  }
  .bleed-off > * {
    transform: none !important;
    height: auto !important;
    overflow: visible !important;
  }
  .bleed-off img { height: auto !important; width: 100% !important; }
}