/* ============================================================
   Components — reusable UI primitives
   ============================================================ */

/* Navigation ------------------------------------------- */
/* Liquid-glass surface — translucent fill + backdrop blur + saturation
   boost recover the color punch the blur eats. The 1px inset highlight is
   the specular-edge cue Apple's Liquid Glass uses to lift the surface
   off the page; the ::before luminosity gradient simulates light bending
   through a curved-edge glass tile (bright top, faint shadow bottom). */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  isolation: isolate;
  background: rgb(var(--white-rgb) / 0.62);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgb(var(--white-rgb) / 0.55);
  transition:
    background-color var(--t-med) ease,
    border-color var(--t-med) ease,
    box-shadow var(--t-med) ease;
}
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgb(var(--white-rgb) / 0.42),
    transparent 44%
  );
}
.nav--scrolled {
  background: rgb(var(--white-rgb) / 0.72);
  border-bottom-color: var(--border);
  box-shadow: inset 0 1px 0 rgb(var(--white-rgb) / 0.55);
}

/* Fallback: opaque surface where backdrop-filter isn't available. The
   luminosity gradient also drops out — it relies on the translucent base
   to read as light refraction, not as a banded overlay. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav,
  .nav--scrolled {
    background: var(--bg);
  }
  .nav::before {
    display: none;
  }
}

/* Honor user preferences for reduced transparency / increased contrast.
   `prefers-reduced-transparency` is the precise signal but has limited
   Safari support, so `prefers-contrast: more` widens the safety net. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .nav,
  .nav--scrolled {
    background-color: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .nav::before {
    display: none;
  }
}

.nav__inner {
  position: relative;
  z-index: 1;
  width: var(--rail-width);
  margin-inline: auto;
  padding: 18px var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 32px;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-body);
  letter-spacing: -0.02em;
  color: var(--fg);
  justify-self: start;
}

.brand-word {
  position: relative;
  top: -1px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-self: center;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: end;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav__btn {
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--fg-secondary);
  letter-spacing: 0;
  transition: color var(--t-fast) ease;
}
.nav__btn:hover {
  color: var(--brand);
}
.nav__btn[aria-current="page"] {
  color: var(--brand);
}

.nav__divider {
  width: 1px;
  height: 18px;
  background: var(--border-strong);
}

/* Hover-cards (Product / Resources) ------------------- */
.nav__item--menu {
  position: relative;
}

.nav__panel {
  position: fixed;
  width: max-content;
  max-width: min(640px, calc(100vw - 32px));
  padding: 24px;
  background: rgb(var(--white-rgb) / 0.62);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  isolation: isolate;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgb(var(--white-rgb) / 0.55),
    0 1px 0 rgb(var(--shadow-rgb) / 0.04),
    0 24px 48px -24px rgb(var(--shadow-rgb) / 0.18),
    0 8px 16px -12px rgb(var(--shadow-rgb) / 0.12);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition:
    opacity var(--t-fast) ease,
    transform var(--t-fast) ease,
    visibility var(--t-fast) ease;
  z-index: 60;
}

/* Invisible bridge so the cursor can cross the gap between trigger and panel
   without dropping :hover. Overscanned (16px > 10px gap) so fast diagonal
   cursor moves don't slip out during the open transition. */
.nav__panel::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}

/* Liquid-glass luminosity wash — mirrors `.nav::before`. */
.nav__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgb(var(--white-rgb) / 0.42),
    transparent 44%
  );
}

.nav__panel-grid {
  position: relative;
  z-index: 1;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav__panel {
    background: var(--bg-card);
  }
  .nav__panel::after {
    display: none;
  }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .nav__panel {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .nav__panel::after {
    display: none;
  }
}

.nav__panel--open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav__panel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 28px 40px;
}

.nav__panel-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.nav__menu-item {
  display: grid;
  gap: 4px;
  line-height: 1.35;
}

.nav__menu-title {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.01em;
  transition: color var(--t-fast) ease;
}

.nav__menu-sub {
  font-size: var(--fs-body);
  color: var(--fg-secondary);
}

.nav__menu-item:hover .nav__menu-title,
.nav__menu-item:focus-visible .nav__menu-title,
.nav__menu-item[aria-current="page"] .nav__menu-title {
  color: var(--brand);
}

/* Narrow grid — single column for compact panels (e.g. What is Opus?). */
.nav__panel-grid--narrow {
  grid-template-columns: minmax(240px, auto);
  gap: 20px;
}

/* Two-column grid — used by the Resources panel. */
.nav__panel-grid--two-col {
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  gap: 20px 32px;
}

@media (max-width: 720px) {
  .nav__panel-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .nav__panel {
    max-width: min(360px, calc(100vw - 32px));
  }
}

/* Mobile navigation — hamburger toggle + portaled top sheet ------ */
/* Below 980px the desktop list collapses behind a hamburger toggle.
   Brand + Talk to Sales + toggle remain in the row; everything else
   lives in the .nav__panel--mobile sheet (portaled into .nav__portals
   so backdrop-filter operates on the page, matching the desktop pattern). */

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--fg);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav__toggle:hover {
  background: rgb(var(--shadow-rgb) / 0.06);
}

.nav__toggle-bars {
  position: relative;
  display: block;
  width: 18px;
  height: 12px;
}
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition:
    transform var(--t-fast) var(--ease-out),
    top var(--t-fast) var(--ease-out);
}
.nav__toggle-bars::before {
  top: 2px;
}
.nav__toggle-bars::after {
  top: 8.5px;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::before {
  top: 5.25px;
  transform: rotate(45deg);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::after {
  top: 5.25px;
  transform: rotate(-45deg);
}
@media (prefers-reduced-motion: reduce) {
  .nav__toggle-bars::before,
  .nav__toggle-bars::after {
    transition: none;
  }
}

/* Mobile sheet — full-width modifier on .nav__panel. Inherits the
   liquid-glass surface, backdrop-filter, fallback, and reduced-
   transparency rules from the base panel; overrides the centered
   transforms and the hover-bridge ::before. */
.nav__panel--mobile {
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  padding: 24px var(--gutter);
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  transform: translateY(-4px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* top + max-height set by JS using the live nav rect. */
}
.nav__panel--mobile.nav__panel--open {
  transform: translateY(0);
}
.nav__panel--mobile::before {
  display: none;
}

.nav__mobile-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav__mobile-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.nav__mobile-link {
  display: block;
  padding: 12px 4px;
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg);
  transition: color var(--t-fast) ease;
}
.nav__mobile-link:hover,
.nav__mobile-link:focus-visible {
  color: var(--brand);
}
.nav__mobile-link[aria-current="page"] {
  color: var(--brand);
}
.nav__mobile-link--secondary {
  color: var(--fg-secondary);
}

.nav__mobile-section {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.nav__mobile-eyebrow {
  margin: 0 0 4px 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}

/* Body scroll lock paired with IIFE #9 (mobile-nav sheet). The html
   lock is also covered by Lenis' own .lenis-stopped rule when motion
   is on; this rule is the parallel path for reduced-motion users
   where Lenis is never instantiated. */
html.nav-mobile-open,
body.nav-mobile-open {
  overflow: hidden;
}

/* iOS Safari unsticks `position: sticky` elements once an ancestor flips to
   `overflow: hidden` — the nav reverts to its document-flow position (Y=0),
   which is off-screen above the viewport whenever the user has scrolled.
   While the mobile sheet is open we apply `overflow: hidden` to <html> via
   both the rule above and Lenis' .lenis-stopped, so the nav vanishes mid-page.
   Pin the nav explicitly during the open state so it stays at the viewport
   top regardless of scroll. IIFE #9 stamps `body { padding-top: navHeight }`
   in JS to absorb the layout shift caused by the nav leaving normal flow. */
html.nav-mobile-open .nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* Below 980 the row collapses to brand + Talk to Sales + hamburger;
   the four nav links and Sign up move into the sheet. (Replaces the
   former 768–980 cramped-band tightening — hamburger removes the
   need to fit the full nav between rails at this width.) */
@media (max-width: 980px) {
  .nav__inner {
    gap: 16px;
  }
  .nav__list,
  .nav__divider {
    display: none;
  }
  /* Specificity bumped via the parent class so this beats the source-later
     `.btn { display: inline-flex }` rule (same single-class specificity
     would otherwise lose the source-order tiebreaker). */
  .nav__actions .nav__signin-row {
    display: none;
  }
  .nav__toggle {
    display: inline-flex;
  }
  .nav__actions .btn {
    padding-inline: 10px;
  }
  .nav__actions .btn::after {
    display: none;
  }
}

/* Eyebrow icons ---------------------------------------- */
/* Small inline glyph that prefixes a section eyebrow (mono uppercase blue
   label). Same idiom as .compliance__eyebrow-icon — 14×14, inherits
   currentColor from the eyebrow's blue text fill. Eyebrow itself owns
   the inline-flex layout (gap 8px), so this only constrains size. */
.eyebrow-icon {
  width: 14px;
  height: 14px;
  flex: none;
}

/* Buttons ---------------------------------------------- */
/* Ported from the elevenlabs CtaButton: square corners, blue brand fill,
   scale-on-hover, and a diagonal arrow that nudges out on hover. The arrow
   is an SVG mask so it inherits text color via currentColor. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--fs-body);
  line-height: 20px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 4px;
  white-space: nowrap;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.btn:hover {
  transform: scale(1.03);
}
.btn::after {
  content: "";
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4.5 4H11.5V11' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.5 11L11.5 4' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4.5 4H11.5V11' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.5 11L11.5 4' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 16px 16px;
  mask-size: 16px 16px;
  transition: transform 0.2s ease;
}
.btn:hover::after {
  transform: translate(2px, -2px);
}

.btn--primary {
  background: var(--brand);
  color: #fff;
}
.btn--primary:hover {
  background: var(--brand-hover);
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.btn--ghost {
  background: var(--gray);
  color: #0c0c0e;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1);
}
.btn--ghost:hover {
  background: #e2e2e2;
  box-shadow:
    inset 0 0 0 1px rgb(0 0 0 / 0.1),
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* Dot ------------------------------------------------- */
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fg-muted);
  display: inline-block;
}
.dot--accent {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.15);
}

/* Hero pill chip -------------------------------------- */
.hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-body);
  letter-spacing: -0.011em;
  padding: 10px 18px;
  border-radius: 4px;
  background: var(--brand);
  color: #fff;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.hero__pill:hover {
  background: var(--brand-hover);
  transform: scale(1.03);
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.hero__pill--ghost {
  background: var(--bg-elevated);
  color: var(--fg);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1);
}
.hero__pill--ghost:hover {
  background: var(--border);
  box-shadow:
    inset 0 0 0 1px rgb(0 0 0 / 0.1),
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.hero__pill-strong {
  font-weight: 500;
  font-size: var(--fs-body);
}
.hero__pill-muted {
  color: var(--fg-muted);
  margin-left: 4px;
}
.hero__pill::after {
  content: "";
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4.5 4H11.5V11' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.5 11L11.5 4' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4.5 4H11.5V11' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.5 11L11.5 4' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 16px 16px;
  mask-size: 16px 16px;
  transition: transform 0.2s ease;
}
.hero__pill:hover::after {
  transform: translate(2px, -2px);
}

/* Screenshot placeholders (dark slabs) ---------------- */
.screenshot {
  width: 100%;
  background: var(--bg-placeholder);
  border-radius: var(--r-xl);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgb(var(--shadow-rgb) / 0.04),
    0 30px 60px -30px rgb(var(--shadow-rgb) / 0.18),
    0 50px 100px -50px rgb(var(--shadow-rgb) / 0.16);
}
.screenshot::before {
  /* Hairline of light at the top — simulates an inset edge */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border-top: 1px solid rgb(var(--white-rgb) / 0.06);
  pointer-events: none;
  z-index: 3;
}
.screenshot::after {
  /* Faint vignette so the dark surface has slight depth */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      130% 90% at 50% -10%,
      rgb(var(--white-rgb) / 0.05) 0%,
      transparent 55%
    ),
    radial-gradient(
      80% 60% at 100% 100%,
      rgb(var(--accent-rgb) / 0.06) 0%,
      transparent 60%
    );
  pointer-events: none;
  z-index: 2;
}

.screenshot--hero {
  margin-top: 64px;
  aspect-ratio: 16 / 9;
  border: 10px solid #000;
  box-shadow: none;
  animation: rise 700ms var(--ease-out) both;
  animation-delay: 180ms;
}
.screenshot__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  position: relative;
  z-index: 0;
}

/* Media protection — deters drag-to-desktop and right-click "Save As".
   Not security; assets are still in DevTools/Network.
   Context-menu suppression is JS-scoped narrower than this — see script.js. */
.screenshot__img,
.trust-bar__logo,
.brand-logo,
.hero__video,
.stage__demo,
.post__hero-img {
  -webkit-user-drag: none;
}

/* Transparent shield over hero media so the right-click target is a div,
   not an image/video. JS contextmenu listener also suppresses the menu. */
.screenshot__shield {
  position: absolute;
  inset: 0;
  z-index: 4; /* above .cursors (1), .screenshot::after (2), ::before (3) */
  pointer-events: auto;
}
.screenshot--kanban {
  margin-top: 56px;
  aspect-ratio: 1728 / 1080;
  border: 1px solid var(--border-strong);
  box-shadow:
    0 1px 0 rgb(var(--brand-rgb) / 0.1),
    0 30px 60px -30px rgb(var(--brand-rgb) / 0.2),
    0 50px 100px -50px rgb(var(--brand-rgb) / 0.2);
}
.screenshot--roadmap {
  margin-top: 56px;
  aspect-ratio: 16 / 8.6;
}
.screenshot--agents {
  margin-top: 56px;
  aspect-ratio: 16 / 9.2;
}
.screenshot--diff {
  margin-top: 56px;
  aspect-ratio: 16 / 8;
}

/* Link arrow (chapter CTAs) ---------------------------- */
.link-arrow {
  display: inline-block;
  transition: transform var(--t-fast) ease;
}
.chapter__link:hover .link-arrow {
  transform: translateX(3px);
}

/* Rise-in animation (used by hero elements) ----------- */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero cursor overlay -------------------------------- */
/* Inline SVG layered above .screenshot__img. Same viewBox as the underlying
   SVG so cursor coordinates map 1:1 to the design and autoscale with size. */
.cursors {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.cursors text {
  font-family: var(--font-body);
}
.cursor {
  will-change: transform;
}
.cursor--architect {
  color: var(--cursor-architect);
  animation: cursor-architect 7.5s ease-in-out infinite;
}
.cursor--prompt {
  color: var(--cursor-prompt);
  animation: cursor-prompt 6s ease-in-out infinite -2.25s;
}
.cursor--layout {
  color: var(--cursor-layout);
  animation: cursor-layout 6.75s ease-in-out infinite -5.25s;
}

/* Waypoints in SVG user units, scoped around the matching workflow nodes. */
@keyframes cursor-architect {
  0%, 100% { transform: translate(728px, 350px); }
  22%      { transform: translate(816px, 406px); }
  44%      { transform: translate(766px, 519px); }
  66%      { transform: translate(678px, 475px); }
  84%      { transform: translate(703px, 381px); }
}
@keyframes cursor-prompt {
  0%, 100% { transform: translate(1371px, 599px); }
  20%      { transform: translate(1521px, 555px); }
  42%      { transform: translate(1609px, 662px); }
  64%      { transform: translate(1490px, 755px); }
  84%      { transform: translate(1340px, 699px); }
}
@keyframes cursor-layout {
  0%, 100% { transform: translate(1393px, 264px); }
  22%      { transform: translate(1549px, 308px); }
  44%      { transform: translate(1618px, 420px); }
  66%      { transform: translate(1487px, 477px); }
  84%      { transform: translate(1349px, 377px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__title,
  .hero__sub-row,
  .hero__media,
  .screenshot--hero,
  .link-arrow,
  .hero__pill,
  .nav__panel {
    animation: none !important;
    transition: none !important;
  }
  /* Freeze each cursor at a deliberate resting position (not its t=0% waypoint). */
  .cursor { animation: none !important; }
  .cursor--architect { transform: translate(735px, 430px); }
  .cursor--prompt    { transform: translate(1480px, 660px); }
  .cursor--layout    { transform: translate(1490px, 370px); }
}

/* ============================================================
   Blog index card — fused-deck tile (image + text below)
   Lives inside the rail-to-rail .blog-index__grid where vertical
   hairlines come from `gap: 1px` against a --border background.
   Cards paint over that with `background: var(--bg)`. Vertical
   breathing room sits inside each card so the deck connects edge-
   to-edge with the section break above and the next section's
   border-top below (mirrors the bento + stories recipe).
   ============================================================ */
.blog-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--bg);
  padding: 56px var(--gutter);
  color: inherit;
  text-decoration: none;
  min-width: 0;
  transition: background var(--t-fast) var(--ease-out);
}

.blog-card:hover {
  background: var(--bg-card);
}

.blog-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--blog-card-radius);
  background: var(--bg-placeholder);
}

.blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  transition: transform var(--t-med) var(--ease-out);
}

.blog-card:hover .blog-card__img {
  transform: scale(1.02);
}

.blog-card__title {
  margin: 0;
  font: 500 22px/1.25 var(--font-display);
  letter-spacing: -0.012em;
  color: var(--fg);
  text-wrap: balance;
  transition: color var(--t-fast) var(--ease-out);
}

.blog-card:hover .blog-card__title {
  color: var(--fg-pressed);
}

.blog-card__date {
  display: block;
  margin-top: auto;
  padding-top: 4px;
  font: 400 13px/1 var(--font-mono);
  color: var(--fg-muted);
}

/* Reduced-motion: kill the image zoom + background swap transitions. */
@media (prefers-reduced-motion: reduce) {
  .blog-card,
  .blog-card__img,
  .blog-card__title {
    transition: none;
  }
  .blog-card:hover .blog-card__img {
    transform: none;
  }
}

/* ============================================================
   Blog article page (post) — header, hero, prose body, closing
   ------------------------------------------------------------
   Layout strategy:
   - The article lives inside .container (rails on the sides).
   - .post__header and .post__hero span the full container width
     (so the hero sits flush rail-to-rail-inside, like a section header).
   - The reading column (.post__body, .post__end-rule, .post__back-link)
     is clamped to --prose-width and centered.
   - Inline figures and embeds inside .post__body opt into a wider
     --prose-figure-width "breakout" so visuals carry more weight than
     the body copy without escaping the rails.
   ============================================================ */
.post {
  --prose-figure-width: min(880px, 100%);
}

/* Post header ----------------------------------------------------- */
.post__header {
  max-width: var(--prose-width);
  margin: 0 auto 48px;
}

.post__eyebrow {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font: 500 12px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand);
}

.post__eyebrow-tag {
  color: var(--brand);
}

.post__eyebrow-sep {
  color: var(--fg-faint);
}

.post__eyebrow-cat {
  color: var(--fg-secondary);
}

.post__title {
  margin: 20px 0 28px;
  font: 500 var(--fs-hero)/1.05 var(--font-display);
  letter-spacing: -0.024em;
  color: var(--fg);
  text-wrap: balance;
}

.post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  font: 400 13px/1.4 var(--font-mono);
  color: var(--fg-muted);
}

.post__meta time {
  color: var(--fg-secondary);
}

.post__meta-author {
  color: var(--fg-secondary);
}

.post__meta-reading {
  color: var(--fg-muted);
}

.post__meta-sep {
  margin: 0 8px;
  color: var(--fg-faint);
}

/* Hero ------------------------------------------------------------ */
.post__hero {
  position: relative;
  margin: 0 0 64px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--blog-card-radius);
  background: var(--bg-placeholder);
}

.post__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
}

.post__hero-shield {
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: auto;
}

/* Prose column ---------------------------------------------------- */
.post__body {
  max-width: var(--prose-width);
  margin: 0 auto;
  font: 400 var(--prose-body)/var(--prose-leading) var(--font-body);
  color: var(--fg);
}

.post__body > * + * {
  margin-top: var(--prose-paragraph-gap);
}

.post__body > h2 {
  margin-top: 2em;
  font: 500 28px/1.25 var(--font-display);
  letter-spacing: -0.018em;
  color: var(--fg);
  text-wrap: balance;
}

.post__body > h3 {
  margin-top: 1.8em;
  font: 500 22px/1.3 var(--font-display);
  letter-spacing: -0.012em;
  color: var(--fg);
}

.post__body > h4 {
  margin-top: 1.5em;
  font: 500 18px/1.35 var(--font-display);
  color: var(--fg);
}

/* Tighten the gap between a heading and the paragraph that follows it. */
.post__body > h2 + p,
.post__body > h3 + p,
.post__body > h4 + p {
  margin-top: 0.6em;
}

.post__body > blockquote {
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--brand);
  font-style: italic;
  color: var(--fg-secondary);
}

.post__body > blockquote > p {
  margin: 0;
}

.post__body strong,
.post__body b {
  /* Hard rule: no 600 face exists. Medium reads as bolded against 400 body. */
  font-weight: 500;
}

.post__body em,
.post__body i {
  font-style: italic;
}

/* Lists ----------------------------------------------------------- */
.post__body > ul,
.post__body > ol {
  padding-left: 1.4em;
}

.post__body > ul {
  list-style: disc;
}

.post__body > ol {
  list-style: decimal;
}

.post__body > ul > li::marker,
.post__body > ol > li::marker {
  color: var(--brand);
}

.post__body > ul > li + li,
.post__body > ol > li + li {
  margin-top: 0.4em;
}

/* Links ----------------------------------------------------------- */
.post__body a {
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease-out);
}

.post__body a:hover {
  border-bottom-color: var(--brand);
}

/* Inline code ----------------------------------------------------- */
.post__body code {
  font: 400 0.92em var(--font-mono);
  background: var(--bg-elevated);
  padding: 2px 6px;
  border-radius: 4px;
}

.post__body > pre {
  padding: 16px 18px;
  background: var(--bg-elevated);
  border-radius: var(--blog-card-radius);
  overflow-x: auto;
  font: 400 14px/1.5 var(--font-mono);
}

.post__body > pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.post__body > hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2.4em 0;
}

/* Inline figures (.post__figure) — break out wider than the prose
   column up to --prose-figure-width, but stay inset to the container. */
.post__figure {
  width: var(--prose-figure-width);
  max-width: 100%;
  margin-inline: auto;
  margin-top: 2em;
  margin-bottom: 2em;
}

.post__figure > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--blog-card-radius);
  -webkit-user-drag: none;
}

.post__figure > figcaption {
  margin-top: 12px;
  font: 400 13px/1.5 var(--font-mono);
  color: var(--fg-muted);
  text-align: center;
}

/* Generic figure fallback (defensive — most figures use .post__figure). */
.post__body > figure:not([class]) {
  width: var(--prose-figure-width);
  max-width: 100%;
  margin-inline: auto;
  margin-top: 2em;
  margin-bottom: 2em;
}

.post__body > figure:not([class]) > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--blog-card-radius);
}

.post__body > figure:not([class]) > figcaption {
  margin-top: 12px;
  font: 400 13px/1.5 var(--font-mono);
  color: var(--fg-muted);
  text-align: center;
}

/* Embeds (YouTube, etc.) ----------------------------------------- */
.post__embed {
  width: var(--prose-figure-width);
  max-width: 100%;
  margin-inline: auto;
  margin-top: 2em;
  margin-bottom: 2em;
}

.post__embed-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--blog-card-radius);
  background: var(--bg-placeholder);
}

.post__embed-frame > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Closing block --------------------------------------------------- */
.post__end-rule {
  max-width: var(--prose-width);
  margin: 80px auto 32px;
  border: 0;
  border-top: 1px solid var(--border);
}

.post__back-link {
  display: block;
  max-width: var(--prose-width);
  margin: 0 auto;
  font: 500 13px/1 var(--font-mono);
  color: var(--brand);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color var(--t-fast) var(--ease-out);
}

.post__back-link:hover {
  color: var(--brand-hover);
}

.post__back-link--top {
  margin-bottom: 40px;
}

/* Reduced-motion: kill body-link underline + back-link color transitions. */
@media (prefers-reduced-motion: reduce) {
  .post__body a,
  .post__back-link {
    transition: none;
  }
}

/* ============================================================
   Research card — listing entry on /research/
   ------------------------------------------------------------
   Mirrors `.blog-card` (rail-to-rail panel painted with --bg, hover
   swaps to --bg-card) but has no hero image: research entries are
   text-driven (arXiv id, title, abstract preview, authors, date).
   ============================================================ */
.research-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--bg);
  padding: 56px var(--gutter);
  color: inherit;
  text-decoration: none;
  min-width: 0;
  transition: background var(--t-fast) var(--ease-out);
}

.research-card:hover {
  background: var(--bg-card);
}

.research-card__id {
  display: block;
  font: 500 12px/1.4 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-secondary);
}

.research-card__title {
  margin: -8px 0 0;
  font: 500 22px/1.25 var(--font-display);
  letter-spacing: -0.012em;
  color: var(--fg);
  text-wrap: balance;
  transition: color var(--t-fast) var(--ease-out);
}

.research-card:hover .research-card__title {
  color: var(--fg-pressed);
}

.research-card__abstract {
  margin: 0;
  font: 400 15px/1.55 var(--font-body);
  color: var(--fg-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.research-card__meta {
  margin-top: auto;
  padding-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.research-card__authors {
  font: 400 13px/1.4 var(--font-body);
  color: var(--fg-muted);
}

.research-card__date {
  font: 400 12px/1 var(--font-mono);
  color: var(--fg-faint);
}

@media (prefers-reduced-motion: reduce) {
  .research-card,
  .research-card__title {
    transition: none;
  }
}

/* ============================================================
   arXiv embed card — sits inside .post__body on a paper page
   ------------------------------------------------------------
   Visually a compact citation panel: top bar with `arXiv | <id>
   | <category>`, body with a "Cite as" line + submitted date +
   authors, and two pill CTAs. Keeps the paper feeling embedded
   (artifact-like) rather than a bare button row.
   ============================================================ */
.arxiv-card {
  width: var(--prose-figure-width);
  max-width: 100%;
  margin-inline: auto;
  margin-top: 2.4em;
  margin-bottom: 2em;
  border: 1px solid var(--border);
  border-radius: var(--blog-card-radius);
  background: var(--bg-card);
  overflow: hidden;
}

.arxiv-card__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-secondary);
}

.arxiv-card__bar-label {
  /* "arXiv" wordmark surrogate — text only, on-brand without importing the logo. */
  color: var(--fg);
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 14px;
}

.arxiv-card__bar-sep {
  color: var(--fg-faint);
}

.arxiv-card__bar-id {
  color: var(--fg-secondary);
}

.arxiv-card__bar-cat {
  color: var(--fg-muted);
}

.arxiv-card__body {
  padding: 24px 28px 28px;
}

.arxiv-card__row + .arxiv-card__row {
  margin-top: 16px;
}

.arxiv-card__row-label {
  display: block;
  margin-bottom: 4px;
  font: 500 11px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
}

.arxiv-card__row-value {
  font: 400 15px/1.5 var(--font-body);
  color: var(--fg);
}

.arxiv-card__cite {
  font: 400 14px/1.4 var(--font-mono);
  color: var(--fg);
}

.arxiv-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

/* Selectors are nested under `.arxiv-card` to outscore `.post__body a`
   (specificity 0,1,1) when this card is rendered inside an article body —
   without the prefix, the post-body link styling overrides our pill colors. */
.arxiv-card .arxiv-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--fg);
  font: 500 13px/1 var(--font-display);
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}

.arxiv-card .arxiv-card__btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.arxiv-card .arxiv-card__btn--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.arxiv-card .arxiv-card__btn--primary:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  color: #fff;
}

.arxiv-card__btn-arrow {
  font: 500 14px/1 var(--font-mono);
  letter-spacing: 0;
}

@media (max-width: 767px) {
  .arxiv-card__bar {
    padding: 12px 16px;
    font-size: 11px;
  }
  .arxiv-card__bar-label {
    font-size: 13px;
  }
  .arxiv-card__body {
    padding: 20px;
  }
  .arxiv-card__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .arxiv-card__btn {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arxiv-card .arxiv-card__btn {
    transition: none;
  }
}

/* ============================================================
   pricing-toggle — Monthly / Yearly segmented tab control
   ------------------------------------------------------------
   A pill-shaped tab bar: gray outer container, the selected
   segment is dark-filled. Used on the pricing hero. Wired by
   IIFE #8 in script.js.
   ============================================================ */
.pricing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 4px;
  background: var(--bg-elevated);
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08);
}

.pricing-toggle__btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Match Yearly's natural height (label + badge row) so the Monthly
     button — which has only a label — vertically centers its text
     in a pill of the same shape, instead of sitting at the top. */
  min-height: 47px;
  gap: 1px;
  padding: 6px 20px;
  border-radius: var(--r-pill);
  font: 500 var(--fs-body)/1.2 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--fg-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition:
    background var(--t-fast) ease,
    color var(--t-fast) ease,
    box-shadow var(--t-fast) ease;
}

.pricing-toggle__btn--active,
.pricing-toggle__btn[aria-selected="true"] {
  background: var(--fg);
  color: var(--bg);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.18), 0 1px 1px rgb(0 0 0 / 0.10);
}

.pricing-toggle__btn:hover:not([aria-selected="true"]) {
  color: var(--fg);
}

.pricing-toggle__badge {
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--brand);
  /* When the Yearly button is selected, the badge swaps to a lightened
     brand tint that reads at AAA contrast on the dark fill. */
}

.pricing-toggle__btn[aria-selected="true"] .pricing-toggle__badge {
  color: var(--brand-on-dark);
}

@media (prefers-reduced-motion: reduce) {
  .pricing-toggle__btn {
    transition: none;
  }
}

/* ============================================================
   pricing-tooltip — info popover for "Learn about manhours"
   ------------------------------------------------------------
   A click-toggled popover anchored to its trigger button.
   JS manages aria-expanded + .pricing-tooltip__popover--open.
   Close on Escape and click-outside.
   ============================================================ */
.pricing-tooltip__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 400 14px/1 var(--font-body);
  color: var(--fg-secondary);
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
  white-space: nowrap;
}

.pricing-tooltip__trigger:hover {
  color: var(--fg);
  border-bottom-color: var(--fg-secondary);
}

.pricing-tooltip__icon {
  width: 14px;
  height: 14px;
  flex: none;
}

.pricing-tooltip__label {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

.pricing-tooltip__popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  width: 280px;
  padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow:
    0 4px 16px -4px rgb(var(--shadow-rgb) / 0.14),
    0 1px 4px -1px rgb(var(--shadow-rgb) / 0.08);
  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    opacity var(--t-fast) ease,
    transform var(--t-fast) ease,
    visibility var(--t-fast) ease;
}

.pricing-tooltip__popover--open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.pricing-tooltip__title {
  font: 500 14px/1.3 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0 0 6px;
}

.pricing-tooltip__body {
  font: 400 13px/1.55 var(--font-body);
  color: var(--fg-secondary);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .pricing-tooltip__popover {
    transition: none;
  }
}

@media (max-width: 480px) {
  .pricing-tooltip__popover {
    right: auto;
    left: 0;
    width: calc(100vw - 40px);
    max-width: 280px;
  }
}

/* ============================================================
   pricing-trust-pill — trust micro-pills below the tier cards
   ------------------------------------------------------------
   Three small horizontal pills with an inline SVG icon + label.
   Used in a row under the pricing calculator cards.
   ============================================================ */
.pricing-trust-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pricing-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font: 400 13px/1.2 var(--font-body);
  color: var(--fg-secondary);
  white-space: nowrap;
}

.pricing-trust-pill__icon {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--fg-secondary);
}

/* Phone tweaks --------------------------------------------------- */
@media (max-width: 767px) {
  .post__header {
    margin-bottom: 32px;
  }

  .post__title {
    margin: 16px 0 20px;
  }

  .post__hero {
    margin-bottom: 40px;
  }

  .post__body > h2 {
    margin-top: 1.6em;
    font-size: 24px;
  }

  .post__body > h3 {
    margin-top: 1.4em;
    font-size: 20px;
  }

  .post__figure,
  .post__body > figure:not([class]),
  .post__embed {
    margin-top: 1.6em;
    margin-bottom: 1.6em;
  }

  .post__end-rule {
    margin-top: 56px;
  }
}

/* ============================================================
   Form primitives — reusable across any page with a form
   ============================================================ */

/* Field wrapper — label above input, consistent gap */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Row containers ------------------------------------------- */
.form-row {
  /* default: single column — overridden by --two-col below */
}

@media (min-width: 768px) {
  .form-row--two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

/* Conditional row — visible when no [hidden] attribute.
   base.css [hidden]{display:none} handles the hidden state.
   Fade-in when revealed (reduced-motion users skip this). */
@media (prefers-reduced-motion: no-preference) {
  .form-row--conditional:not([hidden]) {
    animation: form-row-reveal 200ms var(--ease-out) both;
  }
}

@keyframes form-row-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Label ---------------------------------------------------- */
.form-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  line-height: 1.3;
}

/* Required star — inline after label text */
.form-label-required {
  color: var(--accent-danger);
  margin-left: 4px;
}

/* Shared input/select/textarea base ------------------------ */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 12px 14px;
  font: 16px/1.4 var(--font-body);
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition:
    border-color var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--fg-faint);
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: var(--border-strong);
}

.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible {
  border-color: var(--brand);
  outline: 2px solid rgb(var(--brand-rgb) / 0.2);
  outline-offset: 2px;
}

/* Textarea ------------------------------------------------- */
.form-textarea {
  min-height: 120px;
  resize: vertical;
}

/* Select — custom arrow replaces native; appearance:none removes it */
.form-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%238a8a86' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  cursor: pointer;
}

/* Deselected placeholder option (<option value="">) */
.form-select option[value=""] {
  color: var(--fg-faint);
}

/* Checkbox row --------------------------------------------- */
.form-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* Custom checkbox — styled square, brand blue when checked */
.form-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 1px; /* optical alignment with label text */
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--bg);
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out);
}

.form-checkbox:hover {
  border-color: var(--brand);
}

.form-checkbox:checked {
  background: var(--brand);
  border-color: var(--brand);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6L5 8.5L9.5 3.5' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

.form-checkbox:focus-visible {
  border-color: var(--brand);
  outline: 2px solid rgb(var(--brand-rgb) / 0.2);
  outline-offset: 2px;
}

.form-checkbox-label {
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-secondary);
}

.form-checkbox-label a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--t-fast) var(--ease-out);
}

.form-checkbox-label a:hover {
  color: var(--brand-hover);
}

/* Honeypot — off-screen, NOT display:none (bots look for that) */
.form-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Submit pill loading state --------------------------------
   Added by JS while the request is in flight.
   Spinner via a ::before pseudo-element; text opacity → 0
   so the layout doesn't shift while the button stays filled. */
.hero__pill--loading {
  pointer-events: none;
  position: relative;
}

.hero__pill--loading > * {
  opacity: 0;
}

/* The pill already uses position: relative from its base styles.
   We add a centered spinner ring on top. */
.hero__pill--loading::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border: 2px solid rgb(var(--white-rgb) / 0.35);
  border-top-color: #fff;
  border-radius: 50%;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__pill--loading::before {
    animation: pill-spin 0.8s linear infinite;
  }
}

@keyframes pill-spin {
  to { transform: rotate(360deg); }
}

/* Phone adjustments ---------------------------------------- */
@media (max-width: 767px) {
  .form-row--two-col {
    grid-template-columns: 1fr;
  }
}