/* Shared chrome + responsive layer.
   The Claude Design sources are fixed-width desktop compositions built entirely
   from inline styles, with no breakpoints. The build stamps every multi-track
   grid with data-rtg="<track count>"; the rules below collapse those by width.
   !important is required throughout because the design's own values are inline. */

.rt-nav-toggle { display: none; }
.rt-nav-mobile { display: none; }
.rt-nav-mobile.is-open { display: block; }

.blog-card:hover h3 { color: #00584c; }

.blog-chip:focus-visible,
.rt-nav-toggle:focus-visible,
a:focus-visible { outline: 2px solid #00584c; outline-offset: 3px; }

/* Wide grids drop to two tracks before they drop to one. */
@media (max-width: 1100px) {
  [data-rtg="3"],
  [data-rtg="4"],
  [data-rtg="5"] { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 1040px) {
  .rt-nav-links,
  .rt-nav-actions { display: none !important; }
  .rt-nav-toggle { display: inline-flex !important; margin-left: auto; }
}

@media (max-width: 900px) {
  [data-rtg] { grid-template-columns: 1fr !important; align-items: start !important; }
  /* Only the airy layout gaps shrink — hairline gaps are load-bearing (they
     draw the divider lines on the capability grids). */
  [data-rtg][data-rtg-gap] { gap: 36px !important; }

  /* Home on phones: no pinned scroll choreography at all (Jon, site review:
     "in mobile this just works going down... less motion"). Every sticky
     section becomes a normal block, the horizontal track stacks vertically,
     and the face-cluster stage — the faces already appear in the hero — is
     dropped so the page doesn't show the same people three times. page-home.js
     still writes inline transforms on scroll; !important here outranks them. */
  #v4-hero-spacer, #v4-chor-spacer, #v4-horiz-spacer { height: auto !important; }
  #v4-hero-pin, #v4-chor-pin, #v4-horiz-pin {
    position: static !important; height: auto !important; overflow: visible !important;
  }
  #v4-hero-pin { padding: 48px 0 24px !important; }
  #v4-chor-pin { padding: 40px 0 8px !important; }
  #v4-chor-text { opacity: 1 !important; transform: none !important; }
  #v4-chor-stage { display: none !important; }
  #v4-horiz-track {
    flex-direction: column !important; transform: none !important;
    width: auto !important; gap: 56px !important; padding: 24px 0 !important;
  }
  #v4-horiz-track > div { width: auto !important; padding: 0 24px !important; }
  #v4-horiz-bar { display: none !important; }
  #v4-horiz-pin > div[style*="position:absolute"] { display: none !important; }
  /* reveal animations off: content is simply there */
  [data-reveal] { animation: none !important; opacity: 1 !important; transform: none !important; }
}

@media (max-width: 680px) {
  .rt-footer-bottom { flex-direction: column; align-items: flex-start !important; }
}

/* Cells that intentionally drop one side's padding to sit flush against a
   neighbour would otherwise sit flush against the viewport once stacked. */
@media (max-width: 900px) {
  [data-rtpad] { padding: clamp(24px, 6vw, 36px) !important; }
}

/* -------------------------------------------------------- partner logos */

/* The logo marquee is defined per page in the design; the home strip now uses
   it too, so the animation lives here for every page. */
@keyframes v4Marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.v4-marquee:hover { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .v4-marquee { animation: none !important; } }

/* Client logos in the "Trusted by" strip and the partners marquee. The files
   are the client's own full-colour marks; grayscale keeps a row of clashing
   brand palettes from shouting over the page, matching the site's duotone
   treatment of photography. Height-locked, width free — logo aspect varies. */
.rt-plogo {
  height: 30px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.55;
}

@media (max-width: 680px) {
  .rt-plogo { height: 24px; }
}


/* --------------------------------------------------------- testimonials */

.rt-tvideo:hover .rt-video-play { background: rgba(22, 25, 26, 0.32) !important; }
.rt-tvideo:focus-visible { outline: 3px solid #00584c; outline-offset: -3px; }
.rt-tvideo:hover .rt-video-play > span { transform: scale(1.06); }
.rt-tvideo .rt-video-play > span { transition: transform 160ms ease; }

/* ----------------------------------------------------------------- video */

.rt-video-play { transition: background 160ms ease; }
.rt-video-play:hover { background: rgba(22, 25, 26, 0.14) !important; }
.rt-video-play:hover span { transform: scale(1.06); }
.rt-video-play span { transition: transform 160ms ease; }
.rt-video-play:focus-visible { outline: 3px solid #00584c; outline-offset: -3px; }

@media (prefers-reduced-motion: reduce) {
  .rt-video-play,
  .rt-video-play span { transition: none; }
}

/* ------------------------------------------------------- candidate search */

/* Visually hidden but available to screen readers — used for the input labels
   and the honeypot field, which must be unreachable for humans but present. */
.rt-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.rt-suggest:hover { border-color: #00584c; color: #00584c; }
#rt-send:hover { background: #00584c; }
#rt-restart:hover { border-color: #16191a; color: #16191a; }

#rt-input:focus,
#rt-unlock input:focus { border-color: #00584c; }

/* The results table needs room for the gate to sit over the last rows without
   hiding the first ones. */
#rt-table-wrap { min-height: 420px; }

/* The status line ("Thinking…", "Looking up the company…") breathes so a slow
   research step reads as progress rather than a hang. */
@keyframes rtPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.rt-pulse { animation: rtPulse 1.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .rt-pulse { animation: none; }
}

@media (max-width: 900px) {
  #rt-log { padding: 24px 20px 4px !important; height: clamp(320px, 46vh, 460px) !important; }
  #rt-form { padding: 16px 20px 24px !important; }
  #rt-gate { padding: 40px 20px 32px !important; }
}

/* The results table is five columns and min-width:720px — a desktop object.
   On a phone that leaves "Currently" chopped mid-word and everything past it
   reachable only by an undiscoverable swipe under the claim gate. Below 700px
   the table drops to the three columns that sell the unlock — who (masked),
   what they do, and what they've done — and lets go of its desktop minimum.
   nth-child order is set by runSearch() in tool.js: 3=Currently, 4=Location. */
@media (max-width: 700px) {
  #rt-table { min-width: 0 !important; font-size: 14px !important; }
  #rt-table th,
  #rt-table td { padding: 14px 14px !important; }
  #rt-table th:nth-child(3),
  #rt-table td:nth-child(3),
  #rt-table th:nth-child(4),
  #rt-table td:nth-child(4) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------- post body

   Article HTML comes from WordPress, so it is plain semantic markup with no
   classes to hook. These rules restate the design's typography for it: 300-weight
   headings, the same greens, and a measure that stays readable. */

.rt-prose {
  max-width: 760px;
  font-size: 17px;
  line-height: 31px;
  color: #3d4543;
}

.rt-prose > :first-child { margin-top: 0; }
.rt-prose > :last-child { margin-bottom: 0; }

.rt-prose h2 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.14;
  font-weight: 300;
  letter-spacing: -0.025em;
  color: #16191a;
  margin: 64px 0 20px;
  text-wrap: balance;
}

.rt-prose h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: #16191a;
  margin: 44px 0 16px;
}

.rt-prose h4 {
  font-size: 18px;
  font-weight: 600;
  color: #16191a;
  margin: 32px 0 12px;
}

.rt-prose p { margin: 0 0 24px; }
.rt-prose strong { color: #16191a; font-weight: 600; }

.rt-prose a {
  color: #00584c;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: #bfe0d8;
}
.rt-prose a:hover { text-decoration-color: #00584c; }

.rt-prose ul,
.rt-prose ol { margin: 0 0 24px; padding-left: 22px; }
.rt-prose li { margin-bottom: 12px; }
.rt-prose li::marker { color: #7fc4b5; }

.rt-prose blockquote {
  margin: 40px 0;
  padding: 4px 0 4px 28px;
  border-left: 2px solid #00584c;
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  line-height: 1.5;
  font-weight: 300;
  letter-spacing: -0.015em;
  color: #16191a;
}

.rt-prose figure { margin: 44px 0; }
.rt-prose img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}
.rt-prose figcaption {
  margin-top: 14px;
  font-size: 14px;
  line-height: 22px;
  color: #66716d;
}

.rt-prose hr { margin: 56px 0; border: 0; border-top: 1px solid #e4ece9; }

.rt-prose code {
  font-size: 0.9em;
  background: #f4f9f7;
  border: 1px solid #e4ece9;
  border-radius: 6px;
  padding: 2px 6px;
}
.rt-prose pre {
  background: #16191a;
  color: #e6ecea;
  border-radius: 16px;
  padding: 24px;
  overflow-x: auto;
  margin: 32px 0;
}
.rt-prose pre code { background: none; border: 0; padding: 0; color: inherit; }

/* Tables in the source posts are wide comparison grids; let them scroll rather
   than force the page to. */
.rt-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 32px 0;
  font-size: 15px;
  line-height: 24px;
}
.rt-prose thead th {
  text-align: left;
  font-weight: 600;
  color: #16191a;
  border-bottom: 1px solid #16191a;
  padding: 12px 16px 12px 0;
}
.rt-prose td,
.rt-prose tbody th {
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #e4ece9;
  padding: 14px 16px 14px 0;
}

@media (max-width: 760px) {
  .rt-prose { font-size: 16px; line-height: 29px; }
  .rt-prose h2 { margin-top: 48px; }
  /* A table can't reflow, so give it its own scroll container. */
  .rt-prose table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ---- skip link -------------------------------------------------------- */
/* Off-screen until focused: the first tab stop on every page jumps past the
   nav to <main id="main">. */
.rt-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #16191a;
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 12px 0;
  font-size: 15px;
  text-decoration: none;
}
.rt-skip:focus {
  left: 0;
  color: #fff;
}

/* ---- JD analyzer ------------------------------------------------------ */

#jd-drop:hover,
#jd-drop.is-over,
#jd-drop:focus-visible {
  border-color: #00584c;
  background: #ecf6f2;
}

/* The scan effect: a soft green band sweeping the card while phases tick.
   Pure decoration over real latency — the phase list is the honest part. */
.jd-scan-card { isolation: isolate; }
.jd-scanline {
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 40%;
  background: linear-gradient(90deg, rgba(127, 196, 181, 0), rgba(127, 196, 181, 0.16), rgba(127, 196, 181, 0));
  animation: jdScan 2.2s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes jdScan {
  from { transform: translateX(0); }
  to { transform: translateX(350%); }
}

#jd-gate input:focus { border-color: #00584c; }
#jd-gate-btn:hover { background: #00584c; }
#jd-gate-btn:disabled { opacity: 0.55; cursor: default; }
#jd-restart:hover { border-color: #16191a; color: #16191a; }

@media (prefers-reduced-motion: reduce) {
  .jd-scanline { animation: none; opacity: 0; }
}

/* ---- FAQ accordion ---------------------------------------------------- */
.rt-faq summary::-webkit-details-marker { display: none; }
.rt-faq summary:hover { color: #00584c; }
.rt-faq summary:focus-visible { outline: 2px solid #00584c; outline-offset: 4px; }
.rt-faq[open] .rt-faq-mark {
  background: #00584c;
  border-color: #00584c;
  color: #fff;
}
.rt-faq[open] .rt-faq-mark::after { content: ''; }
.rt-faq[open] .rt-faq-mark { font-size: 0; }
.rt-faq[open] .rt-faq-mark::before {
  content: '\2212';
  font-size: 15px;
}

/* ---- figures lifted out of headings ----------------------------------- */
/* Elementor authors step numbers and headline stats as <h2>/<h3> for their
   size. distill.mjs re-tags them so they stay out of the page outline; this
   gives them back the visual weight they were carrying. */
.rt-prose .rt-figure {
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.05;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: #00584c;
  margin: 40px 0 8px;
}
.rt-prose .rt-figure + h2,
.rt-prose .rt-figure + h3,
.rt-prose .rt-figure + h4 { margin-top: 0; }