/* ============================================================
   GuardPuppy — marketing site
   Art direction per GuardPuppy_v2 Part C (binding)
   ============================================================ */

:root {
  --paper: #F7F4EC;
  --paper-deep: #EFEADF;
  --ink: #1E2A24;
  --ink-soft: #4A584F;
  --ink-faint: #7A857D;
  --green: #1F5C45;
  --green-bright: #2E8B62;
  --amber: #C9883A;
  --caution: #E0A100;
  --danger: #C0392B;
  --code-bg: #13211B;
  --code-green: #7FE3A6;
  --code-dim: #4F7A62;
  --hairline: rgba(30, 42, 36, 0.14);

  --hl-color: #C9883A;          /* tweakable: highlight word */
  --hero-headline-size: 64px;   /* tweakable */

  --font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --maxw: 1120px;
}

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

html { scroll-behavior: smooth; }

body {
  overflow-x: clip;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.texture-on {
  background-image: url('/assets/paper-texture.jpg');
  background-size: 1400px auto;
  background-attachment: fixed;
}

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

::selection { background: rgba(46, 139, 98, 0.22); }

/* ---------- type ---------- */

h1, h2, h3 { font-family: var(--font-display); font-weight: 560; letter-spacing: -0.01em; text-wrap: pretty; }

.hl {
  font-style: italic;
  color: var(--hl-color);
  font-weight: 500;
}

.kicker {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-bright);
  display: block;
  margin-bottom: 18px;
}

.section-head {
  font-size: 44px;
  line-height: 1.12;
  max-width: 19em;
  margin-bottom: 24px;
}

.lede { font-size: 20px; color: var(--ink-soft); max-width: 38em; text-wrap: pretty; }

p + p { margin-top: 1em; }

a { color: var(--green-bright); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- nav ---------- */

header.site-nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  padding: 26px 0;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none !important;
}

.wordmark img { width: 34px; height: 41px; display: block; }

.wordmark .wm-text {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.wordmark .wm-guard { color: var(--ink); }
.wordmark .wm-puppy { color: var(--green); }

nav.pills {
  display: flex;
  align-items: center;
  gap: 6px;
}

nav.pills a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  padding: 8px 15px;
  border-radius: 999px;
  background: rgba(247, 244, 236, 0.55);
  backdrop-filter: blur(6px);
  transition: background 150ms ease;
  text-decoration: none !important;
}
nav.pills a:hover { background: rgba(247, 244, 236, 0.95); }

nav.pills a.cta {
  background: var(--green);
  color: var(--paper);
  margin-left: 8px;
}
nav.pills a.cta:hover { background: var(--green-bright); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 680px;
  height: 92vh;
  max-height: 920px;
  overflow: hidden;
}

.hero img.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% top;
}

.hero .hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(247, 244, 236, 0.88) 0%,
    rgba(247, 244, 236, 0.55) 34%,
    rgba(247, 244, 236, 0.0) 60%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 104px 40px 40px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero h1 {
  font-size: var(--hero-headline-size);
  line-height: 1.06;
  max-width: 9.5em;
  margin-bottom: 26px;
}

.hero .sub {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 30em;
  margin-bottom: 36px;
  text-wrap: pretty;
}

.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* keep the headline and sub off the mascot at all overlay widths */
@media (min-width: 761px) {
  .hero h1 { max-width: min(9.5em, 50vw); }
  .hero .sub { max-width: min(28em, 42vw); }
}

/* short viewports: scale the hero stack so the CTAs stay above the fold */
@media (min-width: 761px) and (max-height: 780px) {
  .hero-content { padding-top: 92px; }
  .hero h1 { font-size: calc(var(--hero-headline-size) * 0.82); margin-bottom: 20px; }
  .hero .sub { font-size: 17px; margin-bottom: 28px; }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 550;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, transform 80ms ease;
  text-decoration: none !important;
}
.btn:active { transform: scale(0.98); }

.btn-primary { background: var(--green); color: var(--paper); }
.btn-primary:hover { background: var(--green-bright); }

.btn-ghost { background: rgba(247,244,236,0.5); color: var(--ink); border-color: rgba(30,42,36,0.35); }
.btn-ghost:hover { background: rgba(247,244,236,0.95); }

/* ---------- trust ticker ---------- */

.ticker {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: rgba(31, 92, 69, 0.045);
  padding: 13px 0;
}

.ticker-line {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ticker-line .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 0 3px rgba(46, 139, 98, 0.18);
  flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  body.ticker-live .ticker-line .dot { animation: pulse 2.6s ease-in-out infinite; }
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(46,139,98,0.18); }
  50% { box-shadow: 0 0 0 6px rgba(46,139,98,0.07); }
}

.ticker-line .num { color: var(--green); font-weight: 600; font-variant-numeric: tabular-nums; }
.ticker-line .sep { color: var(--ink-faint); }

/* ---------- sections ---------- */

section.band { padding: 110px 0; }
section.band + section.band { border-top: 1px solid var(--hairline); }

/* ---------- proof band (hero pt 2) ---------- */

.proof-band {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 64px;
  align-items: center;
}

/* dark code/proof card */
.code-card {
  background: var(--code-bg);
  border-radius: 14px;
  padding: 26px 28px 24px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--code-green);
  box-shadow: 0 24px 60px -28px rgba(19, 33, 27, 0.5);
  overflow-x: auto;
}

.code-card .cc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--code-dim);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.code-card .cc-head .win-dot { width: 9px; height: 9px; border-radius: 50%; background: #24382E; }

.code-card .ln { display: flex; gap: 18px; white-space: nowrap; }
.code-card .sym { color: var(--code-green); min-width: 30ch; }
.code-card .score { color: var(--caution); min-width: 5ch; text-align: right; }
.code-card .why { color: var(--code-dim); }
.code-card .ln.verdict { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(127, 227, 166, 0.15); }
.code-card .ln.verdict .sym { color: #FFF; }
.code-card .ln.verdict .score { color: var(--danger); }
.code-card .comment { color: var(--code-dim); }

/* ---------- mono pull quote ---------- */

.mono-quote {
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 2;
  background: rgba(31, 92, 69, 0.05);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 24px 28px;
  margin-top: 40px;
  max-width: 640px;
  overflow-x: auto;
}
.mono-quote .k { color: var(--ink-faint); display: inline-block; min-width: 14ch; }
.mono-quote .clean { color: var(--green-bright); }
.mono-quote .bad { color: var(--danger); }

/* thesis signal callout */
.signal-callout {
  margin-top: 44px;
  max-width: 720px;
  border-left: 3px solid var(--amber);
  padding: 6px 0 6px 28px;
}
.signal-callout p {
  font-family: var(--font-display);
  font-size: 27px;
  line-height: 1.4;
  font-style: italic;
  color: var(--ink);
}

/* ---------- timeline diagram ---------- */

.timeline {
  margin-top: 56px;
  max-width: 760px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: rgba(247, 244, 236, 0.7);
  padding: 30px 34px;
}

.tl-row {
  display: grid;
  grid-template-columns: 64px 14px 1fr;
  gap: 18px;
  align-items: center;
  padding: 7.5px 0;
  font-family: var(--font-mono);
  font-size: 14.5px;
}

.tl-row .t { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.tl-row .sev { width: 14px; height: 14px; border-radius: 4px; }
.tl-row .ev { color: var(--ink); }
.tl-row .ev small { color: var(--ink-faint); font-size: 12.5px; display: block; }

.sev.s0 { background: #DDD5C0; }
.sev.s1 { background: #E5C078; }
.sev.s2 { background: var(--caution); }
.sev.s3 { background: #D2691E; }
.sev.s4 { background: var(--danger); }
.sev.fire { background: var(--green-bright); box-shadow: 0 0 0 4px rgba(46,139,98,0.18); }

.tl-row.fire-row { border-top: 1px dashed var(--hairline); margin-top: 10px; padding-top: 16px; }
.tl-row.fire-row .ev { color: var(--green); font-weight: 600; }

/* ---------- split view diagram ---------- */

.sv-lede { margin-top: 72px; }

.split-view {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 920px;
}

.sv-panel {
  border: 1px solid var(--hairline);
  border-radius: 14px;
  overflow: hidden;
  background: #FDFCF8;
  box-shadow: 0 18px 44px -30px rgba(30, 42, 36, 0.35);
}

.sv-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(30, 42, 36, 0.045);
  border-bottom: 1px solid var(--hairline);
}
.sv-chrome .dots { display: flex; gap: 5px; }
.sv-chrome .dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(30,42,36,0.18); }
.sv-chrome .url {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-faint);
  background: rgba(247,244,236,0.9);
  border-radius: 6px;
  padding: 4px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sv-body { padding: 26px 26px 22px; min-height: 220px; }

/* abstract page wireframes */
.wf { display: flex; flex-direction: column; gap: 10px; }
.wf .bar { height: 10px; border-radius: 5px; background: rgba(30,42,36,0.1); }
.wf .bar.w40 { width: 40%; } .wf .bar.w60 { width: 60%; } .wf .bar.w80 { width: 80%; }
.wf .box { height: 38px; border-radius: 8px; border: 1.5px dashed rgba(30,42,36,0.18); }
.wf .field {
  height: 38px; border-radius: 8px;
  border: 1.5px solid rgba(192, 57, 43, 0.4);
  background: rgba(192, 57, 43, 0.04);
  display: flex; align-items: center;
  padding: 0 12px;
  font-family: var(--font-mono); font-size: 11px; color: var(--danger);
}
.wf .fake-btn {
  height: 38px; border-radius: 8px; width: 50%;
  background: rgba(192, 57, 43, 0.75);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; color: #FFF; letter-spacing: 0.05em;
}
.wf .brandbar { height: 16px; width: 34%; border-radius: 4px; background: rgba(192,57,43,0.28); }

.sv-tag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.sv-tag .who { color: var(--ink-faint); }
.badge {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
}
.badge.ok { background: rgba(46, 139, 98, 0.12); color: var(--green); }
.badge.bad { background: rgba(192, 57, 43, 0.1); color: var(--danger); }

.sv-foot {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-faint);
  text-align: center;
  padding-top: 4px;
}

/* ---------- modules ---------- */

.modules-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.mod-card {
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 28px 26px 26px;
  background: rgba(253, 252, 248, 0.6);
  transition: border-color 150ms ease;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mod-card:hover { border-color: rgba(31, 92, 69, 0.4); }

.mod-card .icon {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: rgba(31, 92, 69, 0.07);
  display: flex; align-items: center; justify-content: center;
  color: var(--green);
}
.mod-card .icon svg { width: 22px; height: 22px; }

.mod-card h3 { font-size: 21px; font-weight: 600; }
.mod-card h3 .suite { color: var(--ink-faint); font-weight: 480; }
.mod-card p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.6; }

/* ---------- evade grid ---------- */

.evade-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.evade-card {
  border-top: 2px solid var(--green);
  padding: 22px 4px 0;
}
.evade-card .num {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 10px;
}
.evade-card h3 { font-size: 22px; font-weight: 600; margin-bottom: 10px; }
.evade-card p { font-size: 15.5px; color: var(--ink-soft); }

/* ---------- flywheel ---------- */

.flywheel-wrap {
  margin-top: 32px;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 56px;
  align-items: center;
}

.flywheel-svg { width: 100%; height: auto; display: block; }
.flywheel-svg .orbit { stroke: rgba(30,42,36,0.25); stroke-width: 1.5; stroke-dasharray: 3 6; fill: none; }
.flywheel-svg .chev { fill: var(--green-bright); }
.flywheel-svg .node rect { fill: var(--paper); stroke: var(--green); stroke-width: 1.5; }
.flywheel-svg .node text {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em;
  fill: var(--ink); text-anchor: middle; dominant-baseline: central;
}
.flywheel-svg .center-label {
  font-family: var(--font-display); font-style: italic; font-size: 19px;
  fill: var(--ink-faint); text-anchor: middle;
}

/* ---------- proof / commitments ---------- */

.commit-list { margin-top: 44px; display: flex; flex-direction: column; gap: 0; max-width: 720px; }

.commit {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 0;
  border-top: 1px solid var(--hairline);
}
.commit:last-child { border-bottom: 1px solid var(--hairline); }
.commit svg { width: 22px; height: 22px; color: var(--green-bright); flex: none; margin-top: 3px; }
.commit p { font-size: 16.5px; color: var(--ink-soft); }
.commit p strong { color: var(--ink); font-weight: 600; }

/* ---------- who ---------- */

.who-caveats {
  margin-top: 40px;
  max-width: 660px;
  font-size: 14.5px;
  color: var(--ink-faint);
  border-left: 2px solid var(--hairline);
  padding-left: 22px;
}
.who-caveats li { margin: 8px 0 8px 16px; }
.who-caveats .cap {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}

/* ---------- close band (dark) ---------- */

.close-band {
  background: var(--code-bg);
  color: var(--paper);
  padding: 110px 0 0;
  overflow: hidden;
}

.close-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 48px;
  align-items: end;
}

.close-copy { padding-bottom: 110px; }

.close-band .kicker { color: var(--code-green); }
.close-band h2 { font-size: 46px; line-height: 1.12; color: #F7F4EC; max-width: 15em; margin-bottom: 20px; }
.close-band .lede { color: rgba(247, 244, 236, 0.72); margin-bottom: 40px; }

.close-band .btn-primary { background: var(--green-bright); }
.close-band .btn-primary:hover { background: #36A573; }
.close-band .btn-ghost { background: transparent; color: var(--paper); border-color: rgba(247,244,236,0.35); }
.close-band .btn-ghost:hover { background: rgba(247,244,236,0.08); }

.close-mascot {
  align-self: end;
  display: flex;
  justify-content: center;
}
.close-mascot img {
  width: min(300px, 80%);
  display: block;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.45));
}

/* ---------- footer ---------- */

footer {
  background: var(--code-bg);
  border-top: 1px solid rgba(127, 227, 166, 0.12);
  padding: 44px 0 52px;
  color: rgba(247, 244, 236, 0.55);
  font-size: 14px;
}

.foot-grid {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.foot-brand { display: flex; align-items: center; gap: 10px; }
.foot-brand img { width: 26px; height: 31px; }
.foot-brand span { font-family: var(--font-display); font-size: 19px; color: var(--paper); }
.foot-brand .wm-puppy { color: var(--code-green); }

.foot-note { max-width: 380px; line-height: 1.7; margin-top: 12px; }
.foot-note em { font-style: italic; color: rgba(247,244,236,0.75); }

.foot-links { display: flex; flex-direction: column; gap: 8px; }
.foot-links a { color: rgba(247,244,236,0.7); font-size: 14px; }
.foot-links a:hover { color: var(--code-green); }

.foot-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 2;
  color: rgba(247,244,236,0.4);
  text-align: right;
}

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .section-head { font-size: 36px; }
  .hero h1 { font-size: calc(var(--hero-headline-size) * 0.72); }
  .proof-band, .flywheel-wrap, .close-grid { grid-template-columns: 1fr; }
  .modules-grid { grid-template-columns: 1fr 1fr; }
  .close-copy { padding-bottom: 0; }
  .close-band { padding-bottom: 0; }
  .close-mascot { margin-top: 24px; }
  nav.pills a:not(.cta) { display: none; }
}

/* mobile/tablet hero: text overlays the left ~55% of the image (dog is on the right) */
@media (max-width: 760px) {
  .hero {
    min-height: 420px;
    height: auto;
    max-height: none;
    overflow: visible;
  }
  .hero img.hero-photo {
    object-position: 62% top;
    bottom: auto;
    height: min(68vh, 540px);
  }
  .hero .hero-scrim {
    bottom: auto;
    height: min(68vh, 540px);
    background: linear-gradient(95deg,
      rgba(247, 244, 236, 0.93) 0%,
      rgba(247, 244, 236, 0.82) 35%,
      rgba(247, 244, 236, 0.4) 55%,
      rgba(247, 244, 236, 0.0) 70%);
  }
  .hero-content {
    padding: 80px 22px 32px;
    justify-content: flex-start;
  }
  .hero h1 { max-width: 55vw; }
  .hero .sub { max-width: 52vw; font-size: 16px; margin-top: 9.6em; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 22px; }
  section.band { padding: 72px 0; }
  .hero h1 { font-size: calc(var(--hero-headline-size) * 0.55); }
  /* nav must fit a 360px viewport — this was the source of the asymmetric blank margin */
  header.site-nav { padding: 18px 0; }
  .nav-inner { gap: 12px; }
  .wordmark { gap: 8px; }
  .wordmark img { width: 28px; height: 34px; }
  .wordmark .wm-text { font-size: 20px; }
  nav.pills a.cta { font-size: 13px; padding: 7px 13px; margin-left: 0; white-space: nowrap; }
  .split-view, .modules-grid, .evade-grid { grid-template-columns: 1fr; }
  .section-head { font-size: 30px; }
  .close-band h2 { font-size: 32px; }
  .tl-row { grid-template-columns: 52px 12px 1fr; gap: 12px; font-size: 13px; }
  .code-card { font-size: 11.5px; }
}