/* Counterask landing — base, design-system component classes, and responsive rules.
   Base + keyframes are lifted from the source <helmet> block; the component
   classes port the design-system Button/Input/Tag primitives. */

*, *::before, *::after { box-sizing: border-box; }
/* clip (not hidden) so we don't create a scroll container that breaks
   position: sticky in the pinned animation section */
html, body { overflow-x: clip; }
img { max-width: 100%; height: auto; }

body {
  margin: 0;
  background: #ffffff;
  color: #011627;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
}

/* Slash command inline in prose. Carries the "command" read through the chip
   frame rather than a mono face. */
.cmd {
  padding: 1px 6px; border-radius: 6px;
  background: rgba(17, 17, 17, .05); border: 1px solid rgba(17, 17, 17, .14);
  font-size: var(--fs-small); font-weight: 500; white-space: nowrap;
}
a { color: #374151; text-decoration: none; }
a:hover { color: #011627; }

/* ---- connector keyframe (animation section) ---- */
@keyframes dashFlow{to{stroke-dashoffset:-22}}

/* ================= dither background ================= */
/* Ordered-dither (Bayer 8x8) tiles replace the old blurred gradients. Tiles are
   16px wide and drawn at their native size, so the 2px blocks never resample;
   `pixelated` keeps them hard-edged on HiDPI. The hero band dies out well above
   the headline on both desktop (170px) and mobile (120px), so copy sits on flat
   white. Seams mark only the two sunken sections — the white sections stay bare. */
.dither-hero {
  position: absolute; top: 0; left: 0; right: 0; height: 130px;
  background-image: url("/dither-hero.png");
  background-repeat: repeat-x; background-size: 16px 130px;
  background-position: top center;
  image-rendering: pixelated; pointer-events: none;
}
#value::before, #pilot::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 56px;
  background-image: url("/dither-seam.png");
  background-repeat: repeat-x; background-size: 16px 56px;
  background-position: top center;
  image-rendering: pixelated; pointer-events: none;
}

/* ================= design-system component classes ================= */
/* Button — ported from components/core/Button.jsx */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: var(--fw-medium); line-height: 1;
  border-radius: 10px; cursor: pointer; white-space: nowrap;
  transition: background 140ms ease, color 140ms ease;
  padding: 9px 18px; font-size: var(--fs-small);
  border: 1px solid transparent; text-align: center;
}
/* Size modifiers change padding only — buttons all sit on the --fs-small step. */
.btn--sm { padding: 6px 14px; }
/* Nav CTA carries two labels; the compact one only shows on the mobile nav. */
.nav-cta .nav-cta-short { display: none; }
.btn--lg { padding: 12px 24px; font-size: var(--fs-body); }
.btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); border-color: transparent; }
.btn--primary:hover { background: var(--btn-primary-hover); color: #fff; }
.btn--block { width: 100%; padding: 12px 24px; }
.btn:disabled { opacity: .6; cursor: default; }

/* Input — ported from components/core/Input.jsx */
.input {
  font-family: var(--font-sans); font-size: var(--fs-body); color: var(--text-strong);
  background: #fff; border: 1px solid var(--border-chip); border-radius: var(--radius-8);
  padding: 9px 12px; outline: none; width: 100%; box-sizing: border-box;
  transition: border-color 140ms ease;
}
.input--pill { border-radius: 10px; padding: 9px 14px; }
.input:focus { border-color: var(--ink); }

/* Tag — ported from components/core/Tag.jsx */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: var(--fs-micro); font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  padding: 3px 10px; border-radius: var(--radius-8); line-height: 1.2;
}
.tag--ink { background: var(--ink); color: #fff; border: 1px solid transparent; }

/* Form status message */
.form-status { margin: 4px 0 0; font-size: var(--fs-small); line-height: 1.5; text-align: center; }
.form-status--pending { color: var(--slate-500); }
.form-status--ok { color: #16a34a; font-weight: 600; }
.form-status--error { color: #a11; }

/* ================= qualification form ================= */
/* One card, two tracks: qualification questions on the left, email + submit on
   the right, split by a single hairline. Collapses to one column at 900px. */
.qform {
  margin: 40px auto 0; max-width: 920px;
  display: grid; grid-template-columns: 1.15fr .85fr;
  align-items: stretch;
  background: #fff; border: 1px solid var(--border-card);
  border-radius: 16px; box-shadow: var(--shadow-card); overflow: hidden;
}
.qcol { display: flex; flex-direction: column; gap: 22px; min-width: 0; padding: 30px; }
.qcol--signup {
  gap: 14px; justify-content: center;
  background: #fafafa; border-left: 1px solid var(--border-card);
}
/* fieldset is used for the radio groups; strip its native chrome */
.qfield { margin: 0; padding: 0; border: 0; min-width: 0; }
.qlabel {
  display: block; padding: 0; margin: 0 0 10px;
  font-size: var(--fs-small); line-height: 1.5; font-weight: 500; color: #011627;
}
.qerror { margin: 9px 0 0; font-size: var(--fs-micro); line-height: 1.5; color: #a11; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; position: relative; cursor: pointer; }
/* Kept in the layout (1px, opacity 0) rather than display:none so it stays
   focusable and native validation can still reveal the group. */
.chip-input {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
  opacity: 0; pointer-events: none;
}
.chip-face {
  display: inline-flex; align-items: center;
  padding: 8px 14px; border-radius: var(--radius-8);
  background: #fff; border: 1px solid rgba(17, 17, 17, .18);
  font-size: var(--fs-small); line-height: 1.35; color: #011627;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.chip:hover .chip-face { border-color: rgba(1, 22, 39, .38); }
.chip-input:checked + .chip-face {
  background: var(--ink); border-color: transparent; color: #fff;
}
.chip-input:focus-visible + .chip-face {
  outline: 2px solid var(--ink); outline-offset: 2px;
}

/* "Other" free-text input: revealed only when the Other chip is selected */
.qother { display: none; margin-top: 10px; }
.qfield:has(.chip-input[value="Other"]:checked) .qother { display: block; }
.qother-label {
  display: block; margin: 0 0 6px;
  font-size: var(--fs-micro); line-height: 1.5; color: var(--slate-500);
}

/* Static mobile fallback for the pinned animation section — hidden on desktop */
.anim-static { display: none; }

/* ================= FAQ accordion ================= */
/* <details> keeps every answer in the markup for crawlers while collapsing it
   visually, so the FAQPage structured data still mirrors the page. */
.faq-item { border-top: 1px solid var(--border-card); }
.faq-item:last-child { border-bottom: 1px solid var(--border-card); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 0; cursor: pointer; list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q h3 {
  margin: 0; font-size: var(--fs-lead); font-weight: 600; line-height: 1.45; color: var(--ink);
}
.faq-q:hover h3 { color: var(--gray-700); }
.faq-q:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.faq-chev { flex: none; color: var(--slate-500); transition: transform .18s ease; }
.faq-item[open] .faq-chev { transform: rotate(180deg); }
.faq-a {
  margin: 0 0 22px; padding-right: 31px;
  font-size: var(--fs-body); line-height: 1.7; color: var(--gray-700);
}

/* ================= category comparison ================= */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* The table keeps its 700px grid and scrolls sideways on narrow screens
   rather than collapsing — six rows across four categories only reads as a
   comparison when the columns stay side by side. */
.cmp-scroll { margin-top: 40px; overflow-x: auto; }
.cmp-card {
  min-width: 700px; background: #fff;
  border: 1px solid var(--border-card); border-radius: 16px;
  box-shadow: var(--shadow-card); overflow: hidden;
}
.cmp { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cmp th, .cmp td { padding: 15px 16px; text-align: center; }
.cmp thead th {
  font-size: var(--fs-micro); font-weight: 500; color: var(--slate-500);
  border-bottom: 1px solid var(--border-card);
}
.cmp tbody th {
  text-align: left; padding-left: 22px;
  font-size: var(--fs-small); font-weight: 500; line-height: 1.5; color: var(--ink);
}
.cmp tbody tr + tr > * { border-top: 1px solid rgba(17, 17, 17, .1); }
.cmp td { font-size: var(--fs-small); color: var(--slate-500); }
.cmp .no { color: #b0b0b0; }
/* Icons inherit the cell colour, so the Counterask column reads navy and the rest
   stay muted without a second set of rules. The fixed min-width keeps every
   icon in a column on the same vertical line despite the differing labels. */
.cmp-v { display: inline-flex; align-items: center; gap: 7px; min-width: 66px; }
.cmp-v svg { display: block; flex: none; }
.cmp .col-us { background: rgba(1, 22, 39, .04); }
.cmp thead .col-us { font-size: var(--fs-small); font-weight: 700; color: var(--ink); }
.cmp tbody .col-us { font-weight: 600; color: var(--ink); }
.cmp-lede {
  margin: 30px auto 0; max-width: 660px; text-align: center;
  font-size: var(--fs-body); line-height: 1.7; color: var(--gray-700); text-wrap: pretty;
}

/* ================= responsive ================= */
/* NOTE: the elements are inline-styled and the reveal script mutates some of
   them via the CSSOM, which re-serializes the style attribute with a space
   after each colon/comma. So every [style*=] hook below is listed twice: the
   authored form (no space) and the normalized form (with space). */

/* Tablet + mobile: collapse multi-column grids to a single column */
@media (max-width: 900px) {
  [style*="grid-template-columns:1fr 1.15fr"],
  [style*="grid-template-columns: 1fr 1.15fr"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:1fr 170px 1fr"],
  [style*="grid-template-columns: 1fr 170px 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* The pinned four-scene narrative is desktop-only (same breakpoint gates the
     script in app.js). On mobile, drop the pinned stage but keep an indexable
     static text block carrying the four scene headings. */
  [data-anim-section] { height: auto !important; }
  [data-anim-section] > div:first-child { display: none !important; }
  .anim-static { display: block; padding: 56px 20px 8px; max-width: 520px; margin: 0 auto; text-align: center; }

  .qform { grid-template-columns: 1fr; max-width: 560px; }
  .qcol--signup { border-left: 0; border-top: 1px solid var(--border-card); }
}

/* Phones */
@media (max-width: 760px) {
  h1 { font-size: clamp(30px, 8.5vw, 60px) !important; }
  h2 { font-size: clamp(22px, 6vw, 34px) !important; }
  [style*="font-size:74px"],
  [style*="font-size: 74px"] { font-size: 52px !important; }

  /* Hero top padding is huge on desktop */
  [style*="padding:170px 28px 104px"],
  [style*="padding: 170px 28px 104px"] { padding: 120px 20px 64px !important; }

  /* Nav: hide the section anchors, keep logo + CTA */
  div[style*="z-index:60"] nav > div:last-child > a:not(.btn),
  div[style*="z-index: 60"] nav > div:last-child > a:not(.btn) { display: none !important; }
  /* The doubled-length wordmark + full CTA label overflow a 390px nav, so the CTA
     drops to a compact label on mobile (desktop keeps the full sentence). */
  .nav-cta .nav-cta-full { display: none; }
  .nav-cta .nav-cta-short { display: inline; }
  div[style*="z-index:60"] > div,
  div[style*="z-index: 60"] > div { padding: 14px 16px 0 !important; }
  div[style*="z-index:60"] nav,
  div[style*="z-index: 60"] nav { padding: 7px 8px 7px 14px !important; }

  /* Footer: stack */
  footer > div { flex-direction: column !important; gap: 14px !important; }

  /* Slack mock: the desktop channel rail is a fixed 220px, which leaves ~136px
     for the message column on a phone and wraps the brief to two words a line.
     Mobile Slack is a channel view with no rail, so drop it and trim the 20px
     gutters the wide layout can afford. */
  .slack-side { display: none !important; }
  .slack-main > div { padding-left: 13px !important; padding-right: 13px !important; }
  /* Three buttons abreast don't fit, and shrinking them breaks each label over
     two lines; let the row wrap instead. */
  .slack-actions { flex-wrap: wrap; }
  .slack-actions > span { white-space: nowrap; }

  /* iOS zooms inputs under 16px on focus */
  .input { font-size: 16px; }

  /* Safe-area padding at the very bottom */
  footer { padding-bottom: env(safe-area-inset-bottom); }
}

/* Narrow phones: trim the generous 28px side padding on 1120px wrappers */
@media (max-width: 600px) {
  [style*="max-width:1120px"],
  [style*="max-width: 1120px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}