/* =========================================================
   Alpine Software / RedAlert — Design Direction A
   "Command presence": dark base, red action color,
   condensed display type. Brand hexes are tokens — swap
   in official values when provided.
   ========================================================= */

/* Official palette — Alpine Software Brand Guidelines, July 2025 */
@font-face {
  font-family: "Aspekta";
  src: url("/fonts/Aspekta-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Aspekta";
  src: url("/fonts/Aspekta-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Aspekta";
  src: url("/fonts/Aspekta-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Aspekta";
  src: url("/fonts/Aspekta-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --red: #d63737;          /* Jasper — secondary brand color, action red */
  --red-bright: #ef403a;   /* RedAlert product red — hovers, highlights */
  --yellow: #f9a825;       /* Bright Yellow — sparing accent only */
  --ink-950: #0f1a20;      /* Eerie Black — primary brand color, page base */
  --ink-900: #16222a;      /* section base */
  --ink-800: #1e2a32;      /* cards / surfaces */
  --ink-700: #3f484d;      /* borders (brand gray ramp) */
  --paper: #e8e9eb;        /* Bright Gray — light section base */
  --paper-card: #ffffff;
  --text-on-dark: #e7e8e9;
  --text-dim: #9fa3a6;     /* brand gray ramp */
  --text-on-light: #0f1a20;
  --text-light-dim: #575f63;

  --font-display: "Aspekta", "Segoe UI", sans-serif;
  --font-body: "DM Sans", "Segoe UI", sans-serif;

  --container: 1160px;
  --radius: 6px;
  /* Shared height for the two header controls, the "Book a Demo" button and the
     menu toggle. Both are pinned to it so they cannot disagree: deriving the
     toggle's height from the button's (via align-self: stretch) depended on both
     a fractional line-box height and on the engine stretching a <button>, and
     Safari and Chromium do not have to agree on either. */
  --header-btn-h: 48px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  /* 19px, up from 17px. The audience skews older, so body copy is sized for
     comfortable reading rather than for density, and no text anywhere on the site
     is allowed below 1rem/16px. Line height goes up with it: longer lines need
     more leading, not the same. */
  font-size: 1.1875rem;
  line-height: 1.65;
  color: var(--text-on-dark);
  background: var(--ink-950);
}

img { max-width: 100%; display: block; }
a { color: inherit; }

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

/* ---------- Type ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  margin: 0 0 0.5em;
  text-wrap: balance;
  letter-spacing: 0.005em;
}
h1 { font-size: clamp(2.5rem, 6vw, 4.2rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); letter-spacing: -0.015em; }
h3 { font-size: 1.55rem; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--red-bright);
  margin-bottom: 0.9em;
}
/* The endorsement lockup used in place of an .eyebrow, on /product/. Same job as
   the eyebrow it replaces, so it sits on the eyebrow's bottom margin; the words
   live in the alt text, which is what the H1 below it leaves to the mark. */
.hero-lockup {
  display: block;
  /* 80px, not the 56px this started at. The "powered by Alpine Software" line is
     10% of the mark's height, so 56px rendered it 5.6px tall, which smears on a 1x
     display; 80px puts it at 8px and it reads cleanly. */
  height: 80px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  /* A little more than the eyebrow's 0.9em. The eyebrow was text, so its line box
     contributed leading below the glyphs; an <img> box ends exactly at the
     artwork, and matching the number would read tighter than what it replaced. */
  margin-bottom: 22px;
}
@media (max-width: 700px) {
  /* 64px keeps the tagline above 6px even on a low-density phone, and 185px wide
     still sits comfortably inside a 320px viewport. */
  .hero-lockup { height: 64px; margin-bottom: 18px; }
}
/* The plain RedAlert wordmark at the top of the product and platform subpages.
   It sits above the .eyebrow rather than replacing it, so the mark says RedAlert
   and the eyebrow still says which product or which part of the platform. Free to
   be this small because the plain lockup has no tagline: see partials/redalert-mark.njk. */
.hero-mark {
  display: block;
  height: 44px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin-bottom: 16px;
}
@media (max-width: 700px) {
  .hero-mark { height: 36px; margin-bottom: 12px; }
}
.section-sub {
  font-size: 1.3rem;
  color: var(--text-dim);
  /* 42em, not 46em. At 20.8px a 46em column ran 82 characters per line, and past
     roughly 75 the eye starts losing its place on the return sweep, which undoes
     some of what the larger type just bought. */
  max-width: 42em;
}
.center { text-align: center; }
.center .section-sub { margin-left: auto; margin-right: auto; }
.br-desktop { display: none; }
@media (min-width: 720px) { .br-desktop { display: inline; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 0.8em 1.7em;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-bright); }
.btn-ghost { border-color: var(--ink-700); color: var(--text-on-dark); }
.btn-ghost:hover { border-color: var(--red-bright); }
/* Ghost buttons sit on dark by default; re-ink them on light sections */
.section-accent .btn-ghost { border-color: var(--text-light-dim); color: var(--text-on-light); }
.section-accent .btn-ghost:hover { border-color: var(--red-bright); color: var(--red); }
.btn-sm { font-size: 1.05rem; padding: 0.55em 1.2em; }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(12, 15, 20, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ink-800);
}
/* The gaps here are load-bearing, not taste. .container caps at 1160px, so the
   header row's total width is fixed no matter how wide the monitor is, and the
   brand gets only what the nav, phone, and CTA leave behind. When body type went
   from 17px to 19px the nav grew 25px and the CTA 7px, which pushed the brand down
   to 80px and painted the 34px wordmark at 24px. Extra viewport width cannot fix
   that, so the room comes from the gaps: 24/14/14 instead of 28/20/18 buys back
   48px and leaves the brand 128px against the 113px it needs. Raise any of these
   three and re-measure the brand, or the logo silently shrinks again. */
.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 72px;
}
.brand { display: flex; align-items: center; text-decoration: none; min-width: 0; }
/* The header carries the plain wordmark, not the "creators of RedAlert" lockup.
   That lockup's tagline is only 9.6% of the mark's height, so at any size the
   header row can afford it renders 4 to 5px tall and smears on a 1x display. The
   row concedes about 124px of width to the brand at every viewport from 1160px up
   (.container caps at 1160px, so the leftover after the nav, phone, and CTA never
   grows), and a legible tagline needs a 76px mark, which needs 206px. The
   endorsement lockup lives in the footer instead, where nothing constrains it.
   object-fit is still the important part here. The brand is a shrinkable flex item, so once
   the nav, CTA, and menu toggle claimed the row it used to get compressed, and an
   <img> compressed on one axis is simply distorted: the wordmark rendered ~7%
   narrower than its natural aspect on every phone. `contain` makes the same
   shrink scale the artwork down instead, letterboxing it inside the box, so the
   aspect can never go wrong no matter how narrow the viewport gets. */
.brand-logo { height: 34px; width: auto; max-width: 100%; object-fit: contain; }
.site-nav { display: flex; gap: 14px; margin-left: auto; }
.site-nav a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--text-dim);
  transition: color 0.15s ease;
}
.site-nav a:hover { color: #fff; }
/* Seven top-level items plus the phone and CTA is a tight header; without
   this, labels like "Case Studies" break across two lines. */
.site-nav > a, .nav-more-toggle { white-space: nowrap; }
.nav-more { position: relative; }
.nav-more-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  padding: 0;
  /* Not inherited: the UA stylesheet gives form controls line-height: normal, so
     this button's line box came out 24px while the sibling <a> links inherited
     the body's 27.72px. Same font, same size, but the shorter line box put the
     word "More" 1px above every other item in the row. */
  line-height: inherit;
  transition: color 0.15s ease;
}
.nav-more-toggle:hover { color: #fff; }
.nav-caret {
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.15s ease;
}
.nav-more.open .nav-caret { transform: rotate(225deg) translateY(-2px); }
.nav-more-menu {
  display: none;
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  min-width: 220px;
  background: var(--ink-900);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius);
  padding: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  z-index: 50;
}
.nav-more.open .nav-more-menu { display: block; }
.site-nav .nav-more-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
}
.site-nav .nav-more-menu a:hover { background: var(--ink-800); }
.header-actions { display: flex; align-items: center; gap: 14px; }
/* "Book a Demo" must not break across two lines and stretch the header. */
.header-actions .btn {
  white-space: nowrap;
  /* `height`, not `min-height`. A floor let the button grow past the toggle's
     fixed 48px whenever the engine computed its natural height higher, which is
     what put the two boxes out of step on iOS. Both are now exactly 48px, so
     nothing about the text can change either one: inline-flex centres the label,
     line-height 1 and zero vertical padding keep the font out of the sizing, and
     flex: none stops the row from shrinking it. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--header-btn-h);
  line-height: 1;
  padding: 0 1.2em;
  flex: none;
}
.header-phone {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--text-on-dark);
  white-space: nowrap;
}
.header-phone:hover { color: var(--red-bright); }
.nav-toggle { display: none; }

/* 1160px, not 1100px. Above this breakpoint the row carries the full eight-item
   nav AND the phone number alongside the logo and the CTA, which leaves the brand
   about 124px: (viewport - 48px padding) - 988px of nav, phone, CTA, and gaps. The
   34px wordmark needs 113px of that, so it only fits from ~1149px up. The old
   1100px threshold meant 1101 to 1148 rendered the mark undersized, and before
   object-fit was added it rendered it distorted, by as much as 42%. */
@media (max-width: 1160px) {
  .site-nav {
    display: none;
    position: absolute;
    /* 100% of the sticky header rather than a hardcoded 72px. Same position today
       (an absolute box resolves % against the padding box, which excludes the
       header's 1px bottom border — so this is 72px), but it now follows the
       header instead of needing a hand edit if its height ever changes. */
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--ink-900);
    border-bottom: 1px solid var(--ink-700);
    padding: 8px 24px 16px;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 12px 0; }
  .nav-more { position: static; }
  .nav-more-toggle { padding: 12px 0; width: 100%; justify-content: space-between; }
  .nav-more-menu {
    position: static;
    min-width: 0;
    border: none;
    box-shadow: none;
    background: none;
    padding: 0 0 0 16px;
  }
  .site-nav .nav-more-menu a { padding: 10px 0; }
  .header-phone { display: none; }
  .nav-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    /* An exact square at the shared control height, so it matches the CTA in
       every engine rather than stretching to whatever the CTA computed to. */
    width: var(--header-btn-h);
    height: var(--header-btn-h);
    padding: 0;
    background: none;
    border: 1px solid var(--ink-700);
    border-radius: var(--radius);
  }
  /* Explicit width, so the bars keep their size instead of stretching with the box. */
  .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text-on-dark); }
}

/* Below ~420px the header row is logo + Book a Demo + menu toggle with nothing to
   spare: the CTA and the toggle are fixed at 142px and 48px, so the row only fits
   if the gaps and the page padding give ground. Measured need at 360px is 326px
   against 328px available, which clears with 2px to spare. Narrower than that and
   the logo scales down via object-fit rather than the page scrolling sideways.
   No height override here: the header mark is 34px everywhere, and overriding it
   would make the mark larger on phones than on desktop. */
@media (max-width: 420px) {
  .site-header .container { padding: 0 16px; }
  .header-inner { gap: 12px; }
  .header-actions { gap: 10px; }
  /* The 19px type bump widened "Book a Demo" by 7px, which was enough to push the
     logo off its natural 113px at 360px. Take it back from the button's side
     padding rather than its label or the page padding. Height stays 48px, so the
     tap target is unchanged. */
  .header-actions .btn { padding: 0 0.95em; }
}

/* ---------- Sections ---------- */
.section { padding: 96px 0; }
.section-dark { background: var(--ink-900); }
.section-accent {
  background: var(--paper);
  color: var(--text-on-light);
}
.section-accent .section-sub, .section-accent p { color: var(--text-light-dim); }
.section-accent h2, .section-accent h3 { color: var(--text-on-light); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 120px 0 72px;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(15, 26, 32, 0.96) 30%, rgba(15, 26, 32, 0.55) 75%, rgba(15, 26, 32, 0.8)),
    url("/img/hero-truck.jpg") center 35% / cover no-repeat;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, var(--ink-950));
}
.hero-inner { position: relative; max-width: 900px; }
.hero-sub {
  font-size: 1.4rem;
  color: var(--text-dim);
  max-width: 40em;
  margin-bottom: 1.8em;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-ctas.center { justify-content: center; }

.trust-strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 18px;
  margin-top: 72px;
  padding-top: 32px;
  border-top: 1px solid var(--ink-800);
}
.trust-item strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.1rem;
  color: #fff;
  line-height: 1;
}
.trust-item span {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

/* ---------- Cards ---------- */
.card-grid { display: grid; gap: 20px; margin-top: 40px; }
.card-grid.three { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card {
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
  border-top: 3px solid var(--red);
  border-radius: var(--radius);
  padding: 28px;
}
.card p { color: var(--text-dim); margin: 0; }

/* ---------- Guide / differentiators ---------- */
.guide-inner { display: grid; gap: 48px; }
@media (min-width: 960px) {
  .guide-inner { grid-template-columns: 5fr 7fr; align-items: start; }
}
/* The RedAlert mark closes the Alpine paragraph, which is the first time the
   product itself appears on the homepage. It sits in the space the 5fr column
   already had spare, so it costs no page height. The red lockup, not the white
   one: this section is on the light Bright Gray background. Sized by width with
   height:auto, so the aspect comes from the file and cannot be squeezed. */
.guide-mark {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin-top: 40px;
}
@media (max-width: 700px) {
  /* The column goes full width on a phone, where 340px would run edge to edge. */
  .guide-mark { max-width: 240px; margin-top: 32px; }
}
.diff-cards { display: grid; gap: 18px; }
.diff-card {
  background: var(--paper-card);
  border: 1px solid #e2ded6;
  border-left: 4px solid var(--red);
  border-radius: var(--radius);
  padding: 24px 28px;
  box-shadow: 0 2px 10px rgba(20, 24, 31, 0.05);
}
/* White card: carries its own ink so it reads on dark and light sections alike */
.diff-card h3 { color: var(--text-on-light); }
.diff-card p { margin: 0; color: var(--text-light-dim); }

/* ---------- Plan ---------- */
.plan-steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 20px;
  padding: 0;
  margin: 40px 0;
}
@media (min-width: 820px) { .plan-steps { grid-template-columns: repeat(3, 1fr); } }
.plan-steps li {
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius);
  padding: 32px 28px;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: #fff;
  background: var(--red);
  border-radius: 50%;
  margin-bottom: 16px;
}
.plan-steps p { color: var(--text-dim); margin: 0; }

/* ---------- Platform modules ---------- */
.module-grid {
  display: grid;
  gap: 16px;
  margin-top: 40px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.module {
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius);
  padding: 24px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.module:hover { border-color: var(--red); transform: translateY(-3px); }
.module h3 { font-size: 1.4rem; }
.module p { color: var(--text-dim); font-size: 1.05rem; margin: 0; }

/* ---------- NERIS ---------- */
.neris-inner { display: grid; gap: 32px; align-items: center; }
@media (min-width: 960px) { .neris-inner { grid-template-columns: 8fr 4fr; } }
.neris-cta { justify-self: start; }
@media (min-width: 960px) { .neris-cta { justify-self: end; } }

/* ---------- Quotes ---------- */
.quote-grid {
  display: grid;
  gap: 20px;
  margin-top: 40px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.quote {
  margin: 0;
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.quote p { font-size: 1.15rem; flex: 1; }
.quote footer {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.05rem;
  color: var(--red-bright);
}
/* ---------- Compact vertical rhythm ---------- */
/* Opt in per page with `bodyClass: page-compact` in front matter.
   The default 96px section padding stacks to 192px between content blocks and
   never shrinks on narrow screens, which made a product page 5.7 screens tall
   on desktop and 8.5 on a phone, with a quarter of the desktop page being
   empty space. This tightens the section rhythm and the leading margins on the
   blocks inside them, without touching type size or line-height. */
.page-compact .section { padding: 46px 0; }
.page-compact .page-hero { padding: 32px 0 36px; }
.page-compact h2 { margin-bottom: 0.38em; }
.page-compact .section-sub { margin-bottom: 0.7em; }
.page-compact .feature-list { margin-top: 10px; }
.page-compact .feature-list li { padding-top: 9px; padding-bottom: 9px; }
.page-compact .faq-list { margin-top: 6px; }
.page-compact .faq-item { padding: 17px 0; }
.page-compact .product-gallery { margin-top: 24px; }
.page-compact .related-grid { margin-top: 20px; }
.page-compact .compare-wrap { margin-top: 24px; }
.page-compact .prose p { margin-bottom: 14px; }

/* The feature list is a single column inside a 1160px container, so on wide
   screens it wastes half the width and doubles that section's height. Two
   columns above 900px; one column below, where reading order matters more. */
@media (min-width: 900px) {
  .page-compact .feature-list {
    max-width: none;
    columns: 2;
    column-gap: 48px;
  }
  .page-compact .feature-list li {
    break-inside: avoid;
  }
  /* In two columns, :last-child only clears the border on the right column's
     bottom item, which leaves the two columns ending differently. Keep the rule
     on every item so both columns close the same way. Several products have an
     odd feature count, so the columns are uneven by design. */
  .page-compact .feature-list li:last-child {
    border-bottom: 1px solid var(--ink-700);
  }
}

@media (max-width: 700px) {
  .page-compact .section { padding: 30px 0; }
  .page-compact .page-hero { padding: 22px 0 24px; }
  .page-compact .feature-list li { padding-top: 8px; padding-bottom: 8px; }
  .page-compact .faq-item { padding: 15px 0; }
  .page-compact .product-gallery { gap: 16px; margin-top: 20px; }
}

/* ---------- Department patch marquee ---------- */
.dept-wall { overflow: hidden; }
.dept-wall h2 { margin-bottom: 40px; }
.dept-marquee {
  /* Fade both edges so patches enter and leave instead of being clipped. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.dept-track {
  display: flex;
  width: max-content;
  animation: dept-scroll 70s linear infinite;
}
.dept-set {
  display: flex;
  align-items: center;
  gap: 56px;
  list-style: none;
  margin: 0;
  padding: 0 28px;
}
.dept-set img {
  width: 96px;
  height: 96px;
  max-width: none;      /* defeat the global img { max-width: 100% } */
  object-fit: contain;
  flex: none;
}
/* Translating exactly one copy's width makes the restart frame identical. */
@keyframes dept-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.dept-marquee:hover .dept-track { animation-play-state: paused; }

@media (max-width: 700px) {
  .dept-set { gap: 36px; padding: 0 18px; }
  .dept-set img { width: 72px; height: 72px; }
  .dept-track { animation-duration: 50s; }
}

/* No motion: drop the animation and let the row scroll by hand instead. */
@media (prefers-reduced-motion: reduce) {
  .dept-track { animation: none; }
  .dept-marquee { overflow-x: auto; }
  .dept-set[aria-hidden="true"] { display: none; }
}

/* ---------- Demo page ---------- */
.demo-page { padding-top: 72px; }
.demo-inner { display: grid; gap: 48px; }
@media (min-width: 960px) { .demo-inner { grid-template-columns: 5fr 6fr; } }
.demo-phone a { color: var(--red-bright); font-weight: 600; }
.demo-points { padding-left: 1.2em; color: var(--text-dim); }
.demo-points li { margin-bottom: 0.5em; }

.demo-form {
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius);
  padding: 32px;
  display: grid;
  gap: 16px;
}
.demo-form label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
}
.demo-form input, .demo-form textarea {
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  font: inherit;
  color: var(--text-on-dark);
  background: var(--ink-950);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius);
}
.demo-form input:focus, .demo-form textarea:focus {
  outline: none;
  border-color: var(--red-bright);
}
.form-row { display: grid; gap: 16px; }
@media (min-width: 620px) { .form-row { grid-template-columns: 1fr 1fr; } }
.hidden-field { display: none; }

.thanks-page { padding-top: 120px; padding-bottom: 160px; }
.thanks-page a { color: var(--red-bright); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink-900);
  border-top: 1px solid var(--ink-800);
  /* Extra bottom padding keeps the fixed Remote Support button from covering the
     legal links when the page is scrolled all the way down. */
  padding: 64px 0 100px;
  font-size: 1.05rem;
}
.footer-cols { display: grid; gap: 36px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* 80px, where the header can only manage 34. The footer brand sits in a column
   with no fixed height and no competing controls, so this is the one spot on the
   site that can show the endorsement lockup's tagline at a legible ~7.7px. That is
   why "the creators of RedAlert" still reaches all 91 pages. */
.footer-brand .brand-logo { height: 80px; width: auto; margin-bottom: 16px; }
.footer-brand p { color: var(--text-dim); max-width: 26em; }
.footer-phone {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  text-decoration: none;
  color: #fff;
}
.footer-phone:hover { color: var(--red-bright); }
.footer-address { color: var(--text-dim); font-size: 1rem; }
.footer-col h3 {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}
.footer-col a {
  display: block;
  color: var(--text-on-dark);
  text-decoration: none;
  padding: 5px 0;
}
.footer-col a:hover { color: var(--red-bright); }
.footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--ink-800);
  color: var(--text-dim);
  font-size: 1rem;
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===== Interior pages ===== */
.breadcrumbs {
  padding: 18px 24px;
  font-size: 1rem;
  color: var(--text-dim);
}
.breadcrumbs a { color: var(--text-dim); text-decoration: none; }
.breadcrumbs a:hover { color: var(--text-on-dark); }
.breadcrumbs span[aria-hidden] { margin: 0 6px; opacity: 0.5; }
.breadcrumbs [aria-current] { color: var(--text-on-dark); }

.page-hero { padding: 48px 0 64px; border-bottom: 1px solid var(--ink-700); }
.page-hero h1 { max-width: 18em; }
.page-summary {
  max-width: 42em;   /* same 75-character ceiling as .section-sub */
  margin-top: 18px;
  font-size: 1.3rem;
  line-height: 1.65;
  color: var(--text-dim);
}
.page-hero .hero-ctas { margin-top: 28px; }

.prose { max-width: 46em; }
.prose h2 { margin: 40px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: 16px; line-height: 1.7; color: var(--text-dim); }
.prose p strong { color: var(--text-on-dark); }
.prose a { color: var(--red-bright); }

.key-takeaways {
  border: 1px solid var(--ink-700);
  border-left: 4px solid var(--red);
  background: var(--ink-800);
  border-radius: var(--radius);
  padding: 24px 28px;
  max-width: 52em;
}
.key-takeaways h2 { font-size: 1.3rem; margin-bottom: 12px; }
.key-takeaways ul { list-style: none; }
.key-takeaways li {
  /* 20px, not 26px: the marker is a 7px dot rather than a 12px bar, so the indent
     comes in to keep the gap between marker and text the same as before. */
  padding: 6px 0 6px 20px;
  position: relative;
  color: var(--text-dim);
  line-height: 1.55;
}
/* A round bullet, not a bar. A short red rule at the head of a line reads as a
   strikethrough or a minus sign, which made neutral items look like negatives. */
.key-takeaways li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
}

.feature-list {
  list-style: none;
  max-width: 52em;
  margin-top: 18px;
}
.feature-list li {
  /* 22px, not 30px: see the note on .key-takeaways li. Same swap from a 14px bar
     to a 7px dot, same reason for pulling the indent in with it. */
  padding: 12px 0 12px 22px;
  position: relative;
  color: var(--text-dim);
  line-height: 1.55;
  border-bottom: 1px solid var(--ink-700);
}
.feature-list li:last-child { border-bottom: none; }
.feature-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 22px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
}

.faq-list { max-width: 46em; margin-top: 12px; }
.faq-item { padding: 22px 0; border-bottom: 1px solid var(--ink-700); }
.faq-item:last-child { border-bottom: none; }
.faq-item h3 { font-size: 1.3rem; margin-bottom: 8px; }
.faq-item p { color: var(--text-dim); line-height: 1.65; }

.checklist { max-width: 46em; counter-reset: check; list-style: none; }
.checklist li {
  padding: 18px 0 18px 54px;
  position: relative;
  color: var(--text-dim);
  line-height: 1.65;
  border-bottom: 1px solid var(--ink-700);
  counter-increment: check;
}
.checklist li::before {
  content: counter(check);
  position: absolute;
  left: 0;
  top: 16px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--red);
  color: var(--red-bright);
  font-family: var(--font-display);
  font-weight: 700;
  border-radius: var(--radius);
}
.checklist li strong { color: var(--text-on-dark); }

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 28px;
}
.related-card {
  display: block;
  text-decoration: none;
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius);
  padding: 24px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.related-card:hover { border-color: var(--red); transform: translateY(-2px); }
.related-card h3 { font-size: 1.2rem; margin-bottom: 8px; color: var(--text-on-dark); }
.related-card p { font-size: 1.05rem; color: var(--text-dim); line-height: 1.55; }

.module-link { text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease; }
.module-link:hover { border-color: var(--red); transform: translateY(-2px); }

.diff-card-link { display: block; text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease; }
.diff-card-link:hover { border-color: var(--red); transform: translateY(-2px); }
.card-more {
  display: inline-block;
  margin-top: 14px;
  color: var(--red-bright);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
}

.center-ctas { justify-content: center; }
/* The wrapper is centred but its contents were not, so the heading sat ~60px
   left of the links, which inherit the .prose list indent. Centre the text and
   drop that indent, since these lists carry no markers to align to. */
.official-sources { text-align: center; }
/* Two indents stack here and both have to go, or the centred list sits ~31px
   right of the centred heading: the 1.3em from `.prose ul` (which needs the
   doubled class to outrank, being later in this file) and the browser's default
   40px ul padding, which list-style:none does not remove. */
.prose.official-sources ul { list-style: none; margin-left: 0; padding-left: 0; }
.official-sources li { padding: 6px 0; }
.official-sources a { color: var(--red-bright); }
.customers-strip { margin-top: 0; }

/* ---- Resources section ---- */
.article-meta {
  margin-top: 14px;
  color: var(--text-dim);
  font-size: 1rem;
}
.prose ul, .prose ol { margin: 0 0 16px 1.3em; color: var(--text-dim); }
.prose li { margin-bottom: 8px; line-height: 1.65; }
.prose h3 { margin: 28px 0 10px; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 1.05rem; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--ink-700); color: var(--text-dim); }
.prose th { color: var(--text-on-dark); font-family: var(--font-display); }
.prose blockquote { border-left: 3px solid var(--red); padding: 4px 0 4px 18px; margin: 0 0 16px; font-style: italic; }

.resource-group { margin-top: 36px; }
.resource-group > h2 { margin-bottom: 6px; }
.resource-group > .section-sub { margin-bottom: 18px; }
.resource-list { list-style: none; display: grid; gap: 14px; }
.resource-item {
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
  border-radius: 10px;
  padding: 18px 20px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.resource-item:hover { border-color: var(--red); transform: translateY(-2px); }
.resource-item a { text-decoration: none; display: block; }
.resource-item h3 { margin-bottom: 6px; }
.resource-item p { color: var(--text-dim); margin: 0; }
.resource-item .article-meta { margin-top: 8px; }
.hubspot-form { max-width: 560px; margin-top: 20px; }

/* ---- Video embeds ---- */
.video-embed {
  position: relative;
  width: 100%;
  max-width: 860px;
  aspect-ratio: 16 / 9;
  margin: 32px auto 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--ink-700);
  background: var(--ink-900);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-embed-portrait {
  max-width: 340px;
  aspect-ratio: 9 / 16;
}

.video-caption {
  max-width: 860px;
  margin: 12px auto 0;
  text-align: center;
  color: var(--text-dim);
  font-size: 1.05rem;
}
.video-caption a { color: var(--red-bright); }

/* ---- Product screenshot gallery ---- */
.product-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  margin-top: 36px;
}
.product-shot { margin: 0; width: 240px; }
.product-shot.is-wide { width: 620px; max-width: 100%; }
.product-shot img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--ink-700);
  background: var(--ink-900);
}
.product-shot figcaption {
  margin-top: 10px;
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1.4;
}

/* ---- Comparison table ---- */
.compare-wrap { overflow-x: auto; margin-top: 32px; -webkit-overflow-scrolling: touch; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.compare-table th, .compare-table td { padding: 14px 18px; border-bottom: 1px solid var(--ink-700); vertical-align: middle; }
.compare-table thead th {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  text-align: center;
  color: var(--text-on-dark);
  border-bottom: 2px solid var(--ink-700);
}
.compare-table thead th:first-child { text-align: left; }
.compare-table thead th.col-self { color: var(--red-bright); }
.compare-table td.feat { color: var(--text-dim); line-height: 1.45; }
.compare-table td.cell { text-align: center; font-size: 1.2rem; width: 22%; }
.compare-table td.self, .compare-table th.col-self { background: rgba(214, 55, 55, 0.07); }
/* Three comparison columns instead of two: the fixed 22% cell width leaves the
   row label too little room, and 620px is too cramped to scroll to on a phone. */
.compare-table-wide { min-width: 780px; }
.compare-table-wide td.cell { width: auto; font-size: 1.1rem; }
.compare-table-wide td.feat { width: 26%; }

/* Grouped capability lists: an H3 per group above its own feature list. */
.feature-group-title { margin: 30px 0 12px; font-size: 1.3rem; color: var(--text-on-dark); }
.feature-group-title:first-of-type { margin-top: 20px; }

.compare-yes { color: #35c759; font-weight: 700; }
.compare-no { color: var(--text-dim); opacity: 0.55; }
.compare-partial { color: var(--text-dim); font-size: 1rem; }

/* ---- Compare page ---- */
.check-grid .card { border-top: 3px solid var(--red); }
.check-grid .card h3::before { content: "\2713"; color: #35c759; font-weight: 700; margin-right: 8px; }

.fit-cols { display: grid; gap: 24px; margin-top: 40px; }
@media (min-width: 820px) { .fit-cols { grid-template-columns: 1fr 1fr; } }
.fit-col { background: var(--ink-800); border: 1px solid var(--ink-700); border-radius: var(--radius); padding: 26px 28px; }
.fit-col.yes { border-left: 4px solid #35c759; }
.fit-col.maybe { border-left: 4px solid var(--yellow); }
.fit-col h3 { margin-bottom: 16px; }
.fit-col ul { list-style: none; margin: 0; padding: 0; }
.fit-col li { padding: 10px 0 10px 28px; position: relative; color: var(--text-dim); line-height: 1.5; border-bottom: 1px solid var(--ink-700); }
.fit-col li:last-child { border-bottom: none; }
.fit-col.yes li::before { content: "\2713"; position: absolute; left: 0; color: #35c759; font-weight: 700; }
.fit-col.maybe li::before { content: "\2192"; position: absolute; left: 0; color: var(--yellow); font-weight: 700; }

.num-grid .card { position: relative; }
.num-grid .num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--red-bright);
  margin-bottom: 8px;
}

.compare-full { width: 100%; border-collapse: collapse; min-width: 860px; }
.compare-full th, .compare-full td { padding: 14px 16px; border-bottom: 1px solid var(--ink-700); vertical-align: top; text-align: left; }
.compare-full thead th { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--text-on-dark); border-bottom: 2px solid var(--ink-700); }
.compare-full thead th.col-self { color: var(--red-bright); }
.compare-full .group th {
  background: var(--ink-950);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}
.compare-full td.cat { font-family: var(--font-display); font-weight: 600; color: var(--text-on-dark); width: 16%; }
.compare-full td.self { background: rgba(214, 55, 55, 0.05); width: 30%; }
.compare-full td.mean { color: var(--text-dim); width: 24%; }
.compare-full .yesmark { color: #35c759; font-weight: 700; margin-right: 6px; }
.compare-note { font-size: 1rem; color: var(--text-dim); margin-top: 16px; max-width: none; }

/* ---- Floating Remote Support button (matches the legacy site's fixed pill) ---- */
.remote-support-fab {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--yellow);
  color: #1a1205;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.remote-support-fab:hover {
  background: #ffb733;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42);
}
.remote-support-fab:focus-visible {
  outline: 3px solid var(--red-bright);
  outline-offset: 3px;
}
.rs-icon { width: 21px; height: 21px; flex: none; }

/* On small screens collapse to an icon-only circle so the fixed button never
   covers a page CTA. The accessible name still comes from aria-label. */
@media (max-width: 700px) {
  .remote-support-fab {
    left: 14px;
    bottom: 14px;
    width: 52px;
    height: 52px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  .remote-support-fab .rs-label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .rs-icon { width: 23px; height: 23px; }
}
@media print { .remote-support-fab { display: none; } }

/* ---- Embedded HubSpot forms ------------------------------------------------
   HubSpot injects its own markup (.hs-form, .hs-input, .hs-button). These rules
   re-skin it to match the site's dark theme so the embed doesn't arrive looking
   like a default HubSpot form. Selectors are scoped to .hs-form-embed.
   --------------------------------------------------------------------------- */
.hs-form-embed { display: block; }
.hs-form-embed form { display: grid; gap: 16px; }
.hs-form-embed .hs-form-field { margin: 0; }
.hs-form-embed label,
.hs-form-embed .hs-form-field > label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
}
.hs-form-embed .hs-field-desc {
  font-size: 1rem;
  color: var(--text-dim);
  text-transform: none;
  letter-spacing: 0;
  margin: 4px 0 0;
}
.hs-form-embed input[type="text"],
.hs-form-embed input[type="email"],
.hs-form-embed input[type="tel"],
.hs-form-embed input[type="number"],
.hs-form-embed textarea,
.hs-form-embed select {
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  font: inherit;
  color: var(--text-on-dark);
  background: var(--ink-950);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius);
  -webkit-appearance: none;
  appearance: none;
}
.hs-form-embed select {
  background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
                    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.hs-form-embed textarea { min-height: 110px; resize: vertical; }
.hs-form-embed input:focus,
.hs-form-embed textarea:focus,
.hs-form-embed select:focus { outline: none; border-color: var(--red-bright); }
/* --text-dim, not --text-light-dim. The light-dim token is for dim text on the
   light Bright Gray sections; on the --ink-950 input background it measured
   2.71:1, under the 3:1 floor for any text, so placeholders were present but
   unreadable. --text-dim is 6.95:1 on the same background. */
.hs-form-embed input::placeholder,
.hs-form-embed textarea::placeholder { color: var(--text-dim); opacity: 1; }

/* Checkboxes / radios / consent blocks */
.hs-form-embed .inputs-list { list-style: none; margin: 8px 0 0; padding: 0; }
.hs-form-embed .inputs-list li { margin-bottom: 8px; }
.hs-form-embed .inputs-list label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-family: var(--font-body);
  color: var(--text-dim);
}
.hs-form-embed input[type="checkbox"],
.hs-form-embed input[type="radio"] { width: auto; margin: 3px 0 0; accent-color: var(--red); }
.hs-form-embed .legal-consent-container,
.hs-form-embed .hs-richtext {
  font-size: 1rem;
  color: var(--text-dim);
  line-height: 1.5;
}
.hs-form-embed .hs-richtext a,
.hs-form-embed .legal-consent-container a { color: var(--red-bright); }

/* Submit */
.hs-form-embed .hs-submit { margin-top: 4px; }
.hs-form-embed input[type="submit"],
.hs-form-embed .hs-button {
  width: 100%;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  text-transform: none;
  padding: 0.8em 1.7em;
  color: #fff;
  background: var(--red);
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.hs-form-embed input[type="submit"]:hover,
.hs-form-embed .hs-button:hover { background: var(--red-bright); transform: translateY(-2px); }

/* Validation + post-submit states */
.hs-form-embed .hs-error-msg,
.hs-form-embed .hs-error-msgs label {
  color: var(--red-bright);
  font-size: 1rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.hs-form-embed .hs-error-msgs { list-style: none; margin: 6px 0 0; padding: 0; }
.hs-form-embed .submitted-message,
.hs-form-embed .hs-form-fallback { color: var(--text-dim); }
.hs-form-embed .hs-form-fallback a { color: var(--red-bright); font-weight: 600; }
.hs-form-embed .submitted-message { font-size: 1.15rem; line-height: 1.6; }

/* ---- Legal pages ---- */
.legal-updated { margin-top: 18px; color: var(--text-dim); font-size: 1rem; }
.legal-prose { max-width: 52em; }
.legal-prose h2 { margin-top: 48px; font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.legal-prose h3 { margin-top: 30px; font-size: 1.3rem; color: var(--text-on-dark); }
.legal-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.95em;
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--text-on-dark);
}
.footer-legal { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 20px; }
.footer-legal a { color: var(--text-dim); text-decoration: none; font-size: 1rem; }
.footer-legal a:hover { color: var(--red-bright); }