/* UndercoverDoc.ai marketing site — global rules layered on top of the foundations */

html, body { margin: 0; padding: 0; background: var(--bone); }
* { box-sizing: border-box; }
img { max-width: 100%; }

/* Section surface tokens — three surfaces, used to give the page a clear rhythm. */
html {
  --ivory: #F4EFE3;        /* slightly warmer than bone */
  --line-ivory: rgba(15,27,45,0.10);
}

/* Grid-paper texture (a faint cross-ruled grid) — used on "log entry" sections */
.gridpaper-bg {
  background-image:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(15,27,45,0.05) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(15,27,45,0.05) 31px 32px);
}

/* Column-rule texture — fine vertical hairlines, like a procedural document */
.colrule-bg {
  background-image: repeating-linear-gradient(90deg, transparent 0 119px, rgba(15,27,45,0.07) 119px 120px);
}

/* Section seam — gold hairline + mono coordinate stamp.
   Place as the FIRST child of a <section>; absolute-positioned to top edge. */
.section-seam {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--gold);
  opacity: 0.45;
  pointer-events: none;
  z-index: 3;
}
.section-seam::before {
  content: attr(data-stamp);
  position: absolute;
  top: 14px; left: 48px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.28em;
  font-weight: 600;
  color: var(--gold);
  background: inherit;
  white-space: nowrap;
}
.section-seam.on-dark { opacity: 0.7; }
.section-seam.on-dark::before { color: var(--gold); }

a { color: inherit; }
a:hover { text-decoration-color: var(--gold) !important; }

button {
  transition: transform 0.12s ease-out, background 0.18s ease-out, color 0.18s ease-out, border-color 0.18s ease-out;
  font-family: var(--sans);
}
button:not(:disabled):hover { transform: translateY(-1px); }
button:not(:disabled):active { transform: translateY(0) scale(0.99); }

/* The classification "ledger" texture, used selectively */
.ledger-bg {
  background-image: repeating-linear-gradient(0deg, transparent 0 32px, rgba(15,27,45,0.04) 32px 33px);
}
.ledger-bg-dark {
  background-image: repeating-linear-gradient(0deg, transparent 0 32px, rgba(250,250,247,0.04) 32px 33px);
}

/* Brand duotone — pushes any photograph into the navy/bone/gold palette.
   Layer order: img → multiply navy tint → screen gold highlights → grain. */
.brand-duotone {
  position: relative;
  background: var(--navy);
  isolation: isolate;
  overflow: hidden;
}
.brand-duotone > img {
  filter: grayscale(1) contrast(1.08) brightness(0.92);
  mix-blend-mode: luminosity;
  display: block;
}
.brand-duotone::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,27,45,0.55), rgba(15,27,45,0.85));
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 2;
}
.brand-duotone::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 30% 20%, rgba(198,160,90,0.32), transparent 60%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 3;
}
.grain {
  position: relative;
}
.grain > .grain-layer,
.brand-duotone.grain::after {
  /* keep ::after as gold highlight; add the grain via a separate inline element if needed */
}
.brand-duotone.grain {
  background-image:
    radial-gradient(rgba(250,250,247,0.04) 1px, transparent 1px),
    radial-gradient(rgba(15,27,45,0.06) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
}

/* Hairline grid utility for "bound document" sections */
.bound-grid {
  background: var(--navy);
  display: grid;
  gap: 1px;
  border: 1px solid var(--navy);
}
.bound-grid > * { background: var(--bone); }

/* Reusable text classes */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 600;
}
.eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--gold); }

.eyebrow.on-dark { color: rgba(250,250,247,0.65); }

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

/* Primary + secondary button shapes */
.btn-primary {
  background: var(--navy); color: var(--bone); border: 1px solid var(--navy);
  font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  padding: 14px 22px; cursor: pointer; border-radius: 0;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-primary:hover { background: var(--navy-2); border-color: var(--navy-2); }

.btn-primary.on-dark { background: var(--bone); color: var(--navy); border-color: var(--bone); }
.btn-primary.on-dark:hover { background: #fff; }

.btn-secondary {
  background: transparent; color: var(--navy); border: 1px solid var(--navy);
  font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  padding: 14px 22px; cursor: pointer; border-radius: 0;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-secondary:hover { background: var(--navy); color: var(--bone); }
.btn-secondary.on-dark { color: var(--bone); border-color: rgba(250,250,247,0.5); }
.btn-secondary.on-dark:hover { background: var(--bone); color: var(--navy); border-color: var(--bone); }

/* Quiet inline text link with the gold underline rule */
.text-link {
  font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--navy);
  text-decoration: underline; text-decoration-color: var(--gold);
  text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.text-link.on-dark { color: var(--bone); }

/* Section padding standard */
.section {
  padding: 100px 48px;
  border-bottom: 1px solid var(--navy);
}
.section.on-dark { background: var(--navy); color: var(--bone); border-bottom: 1px solid rgba(250,250,247,0.12); }
.section-inner { max-width: 1240px; margin: 0 auto; }

/* Coordinate stamp at corners of dossier-style sections */
.coord-tl, .coord-tr, .coord-bl, .coord-br {
  position: absolute;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(15,27,45,0.45);
}
.on-dark .coord-tl, .on-dark .coord-tr, .on-dark .coord-bl, .on-dark .coord-br { color: rgba(250,250,247,0.45); }
.coord-tl { top: 38px; left: 48px; }
.coord-tr { top: 38px; right: 48px; }
.coord-bl { bottom: 24px; left: 48px; }
.coord-br { bottom: 24px; right: 48px; }

/* Form field — square, hairline, navy focus ring */
.field {
  width: 100%; padding: 14px 16px;
  font-family: var(--sans); font-size: 15px; color: var(--navy);
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: 2px;
  outline: none;
  transition: border-color 0.15s ease-out, background 0.15s ease-out;
}
.field:focus { border-color: var(--navy); background: #fff; }
.field-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ash); font-weight: 600; margin-bottom: 8px; display: block;
}

/* Selected mono utilities */
.tag-pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ash);
  background: var(--bone);
}
.tag-pill.on-dark { color: rgba(250,250,247,0.7); border-color: rgba(250,250,247,0.18); background: transparent; }
.tag-pill.gold { color: var(--gold); border-color: rgba(184,134,46,0.4); }

/* Live ticker dot */
.live-dot {
  width: 8px; height: 8px; border-radius: 999px; background: var(--gold);
  display: inline-block; vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(184,134,46,0.55);
  animation: live-pulse 2s ease-out infinite;
}
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(184,134,46,0.55); }
  70% { box-shadow: 0 0 0 10px rgba(184,134,46,0); }
  100% { box-shadow: 0 0 0 0 rgba(184,134,46,0); }
}

/* Headline H1 + H2 standard pages (slightly tighter than the foundation defaults for marketing rhythm) */
.h1-mkt {
  font-family: var(--serif-display);
  font-size: clamp(48px, 7.2vw, 96px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin: 0;
}
.h1-mkt em { color: var(--gold); font-style: italic; font-weight: 400; }

.h2-mkt {
  font-family: var(--serif-display);
  font-size: clamp(36px, 4.4vw, 56px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0;
}
.h2-mkt em { color: var(--gold); font-style: italic; font-weight: 400; }
.on-dark .h1-mkt, .on-dark .h2-mkt { color: var(--bone); }

.lead {
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ash);
  max-width: 640px;
  margin: 0;
}
.on-dark .lead { color: rgba(250,250,247,0.72); }

/* ─────────── Responsive ─────────── */
html, body { overflow-x: hidden; }

/* Tablet */
@media (max-width: 960px) {
  .section { padding: 72px 24px; }
  .coord-tl, .coord-tr, .coord-bl, .coord-br { display: none; }

  /* Force any inline grid-template-columns to a single column. Inline styles
     win unless we use !important. */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* The "phases" rows in HowItWorks use a 3-track inline grid; collapse to
     a stacked block. */
  [style*="grid-template-columns: 160px"],
  [style*="grid-template-columns: 200px"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Re-establish the small icon+text grids that the universal rule
     accidentally flattened (bullets, tier feature rows, FAQ chevrons). */
  [style*="grid-template-columns: 20px 1fr"] {
    grid-template-columns: 20px 1fr !important;
    gap: 10px !important;
  }
  [style*="grid-template-columns: 32px 1fr"] {
    grid-template-columns: 32px 1fr !important;
    gap: 14px !important;
  }
  [style*="grid-template-columns: 36px 1fr"] {
    grid-template-columns: 36px 1fr !important;
    gap: 12px !important;
  }
  [style*="grid-template-columns: 60px 1fr 40px"] {
    grid-template-columns: 40px 1fr 28px !important;
    gap: 12px !important;
  }
}

/* Mobile */
@media (max-width: 720px) {
  /* Headlines */
  .h1-mkt { font-size: clamp(36px, 9vw, 56px) !important; line-height: 1.02 !important; }
  .h2-mkt { font-size: clamp(28px, 7vw, 40px) !important; line-height: 1.08 !important; }
  .lead   { font-size: 16px !important; }

  /* Section padding gets tighter on phones */
  .section { padding: 56px 20px !important; }

  /* Nav: collapse to wordmark + hamburger */
  nav[style*="grid-template-columns"] {
    grid-template-columns: 1fr auto !important;
    padding: 14px 20px !important;
    gap: 12px !important;
  }
  /* Hide desktop center link list, hide CTA-in-nav (lives in drawer instead) */
  nav .nav-center { display: none !important; }
  nav .nav-cta { display: none !important; }
  nav .nav-burger { display: inline-flex !important; }
  nav .nav-drawer { display: flex !important; }
  /* Smaller wordmark */
  nav a > span[style*="font-size: 22px"] { font-size: 17px !important; }

  /* Hero: hide the floating signal annotations (off-canvas decoration) */
  section figure.brand-duotone ~ div[style*="position: absolute"] {
    display: none !important;
  }
  /* The "SUBJECT · OPERATOR" stamp also collides — keep but reposition */
  section [style*="SUBJECT · OPERATOR"],
  section div[style*="left: -14px"][style*="top: -14px"] {
    left: 0 !important; top: -10px !important;
    font-size: 9px !important; letter-spacing: 0.2em !important;
  }
  /* Coordinate caption under hero image */
  section figure.brand-duotone + div + img + div,
  section figure.brand-duotone + div {
    /* nothing — leave the caption alone */
  }

  /* Hero figure should not stretch absurdly tall on phones */
  figure.brand-duotone[style*="aspect-ratio: 4 / 5"] {
    aspect-ratio: 4 / 4 !important;
  }
  /* Vertical preview tiles */
  figure.brand-duotone[style*="aspect-ratio: 4 / 3"] {
    aspect-ratio: 16 / 11 !important;
  }
  /* Oversized seal mark next to hero */
  section img[src$="seal-gold.svg"][style*="bottom: -22px"] {
    width: 64px !important; height: 64px !important;
    bottom: -16px !important; right: -10px !important;
  }

  /* The phone mockup (TuesdayMorning) — shrink to fit */
  div[style*="width: 340px"][style*="height: 680px"] {
    width: min(300px, 88vw) !important;
    height: 600px !important;
  }

  /* Stat band numbers shrink on phones */
  [style*="font-size: 88px"] { font-size: 64px !important; }
  [style*="font-size: 84px"] { font-size: 60px !important; }
  [style*="font-size: 56px"] { font-size: 40px !important; }
  [style*="font-size: 44px"] { font-size: 34px !important; }
  [style*="font-size: 36px"] { font-size: 28px !important; }
  [style*="font-size: 32px"] { font-size: 26px !important; }

  /* Cards / panels with chunky padding */
  article[style*="padding: 48px 44px"],
  article[style*="padding: 44px"],
  div[style*="padding: 48px 44px"] {
    padding: 28px 22px !important;
  }
  div[style*="padding: 36px 44px"] {
    padding: 24px 22px !important;
  }
  div[style*="padding: 40px 32px"] {
    padding: 28px 20px !important;
  }
  /* Final CTA inner panel */
  section[style*="background: var(--navy)"] > div[style*="padding: 110px 48px 120px"],
  section > div[style*="padding: 110px 48px"] {
    padding: 56px 22px 64px !important;
  }
  section > div[style*="padding: 110px 48px 120px"] img[src$="seal-gold.svg"] {
    display: none !important;
  }
  /* Buttons wrap */
  div[style*="display: flex"][style*="flex-wrap: wrap"] a {
    width: 100%;
    justify-content: center;
  }

  /* Section seam stamp — keep readable, scale down */
  .section-seam::before {
    left: 20px !important;
    font-size: 8.5px !important;
    letter-spacing: 0.18em !important;
  }

  /* Eyebrows scale down */
  .eyebrow { font-size: 10px !important; }

  /* Forms: full width inputs */
  .field { font-size: 15px !important; }

  /* "Live indicator" status bar can wrap */
  div[style*="border-top: 1px solid var(--line)"] span[style*="letter-spacing: 0.22em"] {
    font-size: 9.5px !important;
    letter-spacing: 0.16em !important;
  }
}

/* Very small phones */
@media (max-width: 380px) {
  .section { padding: 48px 16px !important; }
  nav[style*="grid-template-columns"] { padding: 14px 16px !important; }
}