/* ============================================================
   jtsyn — site layer
   Reset, page chrome, and the responsive pass.

   The design system components style themselves with inline styles (that's
   how the Claude Design project is authored), so the responsive rules here
   have to out-specify inline styles with !important. Rather than tag every
   grid in every component, the breakpoint below collapses any grid inside
   the app to a single column and lets a handful of opt-out classes keep
   the layouts that only make sense multi-column:

     .jt-agents  the ten-teammate rosters      → 3 up, then 2 up
     .jt-two     stat strips and bullet pairs  → stays 2 up, then 1 up
     .jt-keep    table rows                    → keeps its columns; the
                 table scrolls sideways inside a .jt-scroll wrapper
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Rotated script accents and offset cards can poke a pixel or two past
     the viewport; clip rather than hidden so position:sticky still works. */
  overflow-x: clip;
}

html, body, #root { height: 100%; margin: 0; padding: 0; }

body {
  font-family: "Sora", ui-sans-serif, system-ui, sans-serif;
  background: #fff;
  color: #2B3340;
}

button { font-family: inherit; }

img, svg, video { max-width: 100%; }

.jt-app img { height: auto; }
.jt-app :is(h1, h2, h3, h4, h5, p, ul, ol) { margin: 0; }

/* Keyboard focus. Components set their own :focus styles off, so put a
   visible ring back on for keyboard users only. */
.jt-app :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid #1976D2;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip link — first tab stop, hidden until focused. */
.jt-skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 6px;
  background: #1976D2; color: #fff;
  font: 500 14px/1 "Sora", sans-serif; text-decoration: none;
  transition: top 120ms cubic-bezier(0.16, 0.84, 0.32, 1);
}
.jt-skip:focus { top: 12px; color: #fff; }

/* Tables that must not stack: scroll them sideways instead. */
.jt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.jt-scroll > * { min-width: 720px; }

/* ── Legal prose ──────────────────────────────────────────────
   The terms/privacy fragments are plain HTML with no inline styles, so
   unlike the component tree they can be styled from here normally. */
.jt-legal { max-width: 760px; padding-bottom: 8px; }
.jt-legal section { margin-top: 52px; }
.jt-legal section:first-child { margin-top: 0; }
.jt-legal h2 {
  font-size: 28px; font-weight: 600; line-height: 1.2;
  letter-spacing: -0.02em; color: var(--ink-900);
  margin: 0 0 16px; padding-bottom: 14px;
  border-bottom: 1px solid var(--ink-200);
}
.jt-legal h3 {
  font-size: 17px; font-weight: 600; line-height: 1.3;
  letter-spacing: -0.01em; color: var(--ink-900); margin: 30px 0 10px;
}
.jt-legal h4 { font-size: 15px; font-weight: 600; color: var(--ink-900); margin: 22px 0 8px; }
.jt-legal p, .jt-legal li { font-size: 15.5px; line-height: 1.75; color: var(--ink-500); }
.jt-legal p { margin: 0 0 14px; }
.jt-legal ul, .jt-legal ol { margin: 0 0 16px; padding-left: 22px; }
.jt-legal li { margin-bottom: 8px; }
.jt-legal strong { color: var(--ink-900); font-weight: 600; }
.jt-legal a { color: var(--blue-500); text-underline-offset: 2px; }
.jt-legal em { color: var(--ink-500); }

/* The "plain English" / "our commitment" opener reads as a pull-quote. */
.jt-legal .summary-box {
  background: var(--blue-050);
  border: 1px solid var(--blue-100);
  border-radius: 12px;
  padding: 30px 32px 20px;
}
.jt-legal .summary-box h2 { border-bottom: 0; padding-bottom: 0; font-size: 22px; }

.jt-legal table { width: 100%; border-collapse: collapse; margin: 8px 0 20px; font-size: 14.5px; }
.jt-legal th, .jt-legal td {
  text-align: left; padding: 12px 14px;
  border-bottom: 1px solid var(--ink-100); color: var(--ink-500);
}
.jt-legal th {
  color: var(--ink-500); font-weight: 600; font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--ink-050); border-bottom: 1px solid var(--ink-200);
}
.jt-legal td strong { color: var(--ink-900); }

@media (max-width: 700px) {
  .jt-legal h2 { font-size: 23px; }
  .jt-legal table { display: block; overflow-x: auto; }
}

/* The nav's mobile disclosure. Hidden on desktop, swapped in below 900px. */
.jt-nav-toggle { display: none; }
.jt-nav-panel { display: none; }

@media (max-width: 900px) {
  .jt-app [style*="grid-template-columns"]:not(.jt-agents):not(.jt-two):not(.jt-keep) {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .jt-agents { grid-template-columns: repeat(3, 1fr) !important; }
  .jt-two    { grid-template-columns: repeat(2, 1fr) !important; }

  /* Bento tiles are placed by explicit spans against a 6-column track. Once
     the track collapses those spans overflow, so let every tile size itself. */
  .jt-app [style*="grid-column"]:not(.jt-keep) { grid-column: auto !important; }
  .jt-app [style*="grid-row"]:not(.jt-keep)    { grid-row: auto !important; }
  .jt-app [style*="grid-auto-rows"]            { grid-auto-rows: auto !important; }

  /* Order flips exist to alternate copy/screenshot left and right. Stacked,
     the copy should always lead, so every flipped block goes back to DOM
     order. (Tagged with a class rather than matched on the inline style —
     "order" is also a substring of "border".) */
  .jt-order { order: 0 !important; }

  .jt-section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .jt-app h1 { font-size: clamp(34px, 8.6vw, 54px) !important; line-height: 1.06 !important; }
  .jt-app h2 { font-size: clamp(26px, 6.6vw, 40px) !important; line-height: 1.14 !important; }
  .jt-app h3 { font-size: clamp(19px, 4.6vw, 26px) !important; }
  /* Keep the handwritten word in proportion to whatever it sits inside. */
  .jt-script { font-size: 1.12em !important; }

  /* Fixed measures from the desktop comp become caps, not widths. */
  .jt-app [style*="max-width"] { max-width: 100% !important; }
  .jt-app [style*="white-space: nowrap"],
  .jt-app [style*="white-space:nowrap"] { white-space: normal !important; }

  /* Heroes are plain blocks, not <Section>s, so they need their own rule. */
  .jt-hero { padding-left: 20px !important; padding-right: 20px !important;
             padding-top: 48px !important; min-height: 0 !important; }

  .jt-nav-desktop { display: none !important; }
  .jt-nav-toggle  { display: inline-flex; }
  .jt-nav-panel[data-open="true"] { display: block; }

  .jt-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  .jt-footer-bottom { flex-direction: column !important; gap: 10px !important; align-items: flex-start !important; }
}

@media (max-width: 1279px) {
  /* The hero's 1fr/1fr grid narrows this row's column well before the
     900px breakpoint below recombines it to full width, so the middot
     row can wrap on ordinary laptop widths, long before mobile. Stack it
     and drop the dots (stray punctuation at a wrapped line's end)
     whenever that narrow band is in play; this also covers the
     single-column mobile hero below 560px. */
  .jt-microproof { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }
  .jt-microproof-centered { align-items: center !important; }
  .jt-microproof > .jt-dot { display: none; }
}

@media (max-width: 560px) {
  .jt-hero { padding-left: 16px !important; padding-right: 16px !important; }
  .jt-agents { grid-template-columns: repeat(2, 1fr) !important; }
  .jt-two    { grid-template-columns: 1fr !important; }
  .jt-section { padding-left: 16px !important; padding-right: 16px !important; }
  .jt-footer-grid { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}