/* Agent Readiness Screen. Tokens and components lifted from the deployed
   OperationFlow pages (Operator Stack, FLOW Number). New rules are marked. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/Inter-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url('fonts/InterTight-latin.woff2') format('woff2');
}

:root {
  --navy-deep: #010F26;
  --navy: #023170;
  --navy-line: rgba(253, 253, 253, 0.12);
  --blue: #0193FE;
  --blue-bird: #0085FB;
  --white: #FDFDFD;
  --slate: #BBC6D5;
  --red: #D32B21;
  --shadow-sm: 0 2px 4px rgba(1, 15, 38, 0.45);
  --shadow-lg: 0 16px 48px rgba(1, 15, 38, 0.35);
  --plate-muted: rgba(1, 15, 38, 0.62);
  --radius: 16px;
  --radius-sm: 10px;
  /* Verdict fills, revision R2. Dark fills with white text, on white plates only. */
  --status-ready: #15803D;
  --status-blocked: #B45309;
  --status-notyet: #C81E14;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--navy-deep);
  color: var(--white);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--blue); color: var(--navy-deep); }

.wrap {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

a { color: var(--blue); }

h1, h2, h3 {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  line-height: 1.12;
  letter-spacing: -0.015em;
}

h1 { font-weight: 800; font-size: clamp(2.5rem, 8vw, 4.2rem); }
h2 { font-weight: 800; font-size: clamp(1.7rem, 4.5vw, 2.3rem); }
h3 { font-weight: 700; font-size: 1.3rem; }

h2:focus-visible, h3:focus-visible { outline: none; }

/* ---------- header and hero ---------- */

.site-logo {
  display: block;
  margin: 34px auto 20px;
  width: min(330px, 72vw);
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(253,253,253,0.12);
  box-shadow: 0 2px 4px rgba(1,15,38,0.45);
}

.wordmark {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
}

.wordmark .dot { color: var(--blue); }

.hero {
  position: relative;
  padding: clamp(44px, 9vw, 84px) 0 clamp(28px, 5vw, 44px);
  overflow: hidden;
}

.hero .sub {
  margin-top: 18px;
  font-size: clamp(1.05rem, 2.6vw, 1.25rem);
  color: var(--slate);
  max-width: 34em;
}

.gear {
  position: absolute;
  top: -70px;
  right: -110px;
  width: 380px;
  height: 380px;
  opacity: 0.05;
  pointer-events: none;
}

/* ---------- cards ---------- */

.card {
  background: var(--navy);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius);
  padding: clamp(20px, 4.5vw, 32px);
  box-shadow: var(--shadow-sm), var(--shadow-lg);
}

.card + .card { margin-top: 22px; }

.section { padding: clamp(20px, 4vw, 34px) 0; }

.kicker {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
}

.lede {
  color: var(--slate);
  margin: 10px 0 0;
  max-width: 38em;
}

/* ---------- forms ---------- */

.field { margin-top: 16px; }

.field label,
.field legend {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 7px;
}

fieldset { border: 0; min-width: 0; }

.hint {
  display: block;
  font-size: 0.82rem;
  color: var(--slate);
  margin-top: 6px;
}

input[type="text"] {
  width: 100%;
  background: var(--navy-deep);
  color: var(--white);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

input[type="text"]:disabled { opacity: 0.45; }

input:focus-visible,
button:focus-visible,
a:focus-visible,
.pill input:focus-visible + span {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.has-error input { border-color: var(--red); }

.err {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--white);
  margin-top: 7px;
}

.err[hidden] { display: none; }

.err::before {
  content: "";
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--red);
  position: relative;
  top: 1px;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 14px 24px;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(90deg, var(--blue), var(--blue-bird));
  color: var(--navy-deep);
  text-decoration: none;
}

.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn.ghost {
  background: transparent;
  color: var(--white);
  border: 1px solid var(--navy-line);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

/* ---------- privacy statement ---------- */

.tools-trust {
  color: var(--blue);
  font-weight: 800;
  font-size: clamp(1.7rem, 4.5vw, 2.3rem);
  line-height: 1.25;
  margin: 0 0 26px;
}

/* ---------- plates ---------- */

.plate {
  background: var(--white);
  color: var(--navy-deep);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.plate-label {
  margin-top: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy-deep);
}

.row-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}

/* ---------- pills ---------- */

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.pill { position: relative; }

.pill input {
  position: absolute;
  opacity: 0;
  inset: 0;
}

.pill span {
  display: inline-block;
  padding: 9px 15px;
  border: 1px solid var(--navy-line);
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--slate);
  cursor: pointer;
  user-select: none;
}

.pill input:checked + span {
  color: var(--white);
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
}

/* Spec section 11: radio and checkbox targets at least 44px tall. The
   lifted pill measures about 39px, so this page lifts it to the floor. */
.pill span { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- tool sections ---------- */

.five-head { margin: clamp(34px, 7vw, 56px) 0 4px; }

.tool-card { margin-top: 24px; }

.tool-card .lede { font-size: 0.95rem; }

/* ---------- screens (new: sections shown one at a time) ---------- */

/* On the Stack the privacy statement follows the hero's bottom padding. Here
   it follows a lede, so it takes the same 26px it already carries below. */
#screen-select .tools-trust { margin-top: 26px; }

#cta .calendly { margin-top: 0; }

.screen[hidden] { display: none; }

.question .field { margin-top: 0; }

.question + .question {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--navy-line);
}

.question .hint { margin-top: 0; margin-bottom: 8px; }

.d4-row { margin-top: 8px; }

.d4-row .field { margin-top: 0; }

.d4-notsure { margin-top: 12px; }

/* ---------- verdict badge (new, revision R2) ----------
   A stamp, not a tag: Inter Tight, uppercase, tight tracking, body size or
   above, dark fill with white text, only ever on a white plate. */

.badge {
  display: inline-block;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  padding: 11px 16px;
  border-radius: 999px;
  color: var(--white);
}

.badge.ready { background: var(--status-ready); }
.badge.blocked { background: var(--status-blocked); }
.badge.notyet { background: var(--status-notyet); }

.result-plate { margin-top: 18px; }

.result-plate .position {
  margin-top: 12px;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
}

.result-plate .hours { margin-top: 4px; font-size: 0.95rem; color: var(--plate-muted); font-weight: 500; }

.result-plate .plate-label { margin-top: 16px; }

.result-plate .paragraph { margin-top: 6px; font-size: 0.95rem; }

.summary { margin-top: 14px; font-size: clamp(1.05rem, 2.6vw, 1.25rem); max-width: 34em; }

.note { margin-top: 12px; color: var(--slate); }

.note + .note { margin-top: 14px; }

/* ---------- Revenue Systems Review (lifted from the FLOW Number page) ---------- */

#cta .five-head { margin-top: 4px; }

.calendly {
  min-height: 700px;
  height: 700px;
  margin-top: 18px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
}

.calendly iframe { display: block; width: 100%; height: 100%; border: 0; }

.calendly.failed { display: none; }

.calendly-fallback {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid var(--navy-line);
  border-radius: 12px;
  background: var(--navy-deep);
}

.calendly-fallback p { margin: 0; }

.calendly-fallback .btn { margin-top: 14px; text-decoration: none; }

.cta-links { margin-top: 16px; }

.cta-links p { margin-top: 8px; }

/* ---------- footer ---------- */

.site-foot {
  margin-top: clamp(48px, 9vw, 80px);
  padding: 30px 0 44px;
  border-top: 1px solid var(--navy-line);
  color: var(--slate);
  font-size: 0.88rem;
}

.site-foot .wordmark { color: var(--white); font-size: 1rem; }

.site-foot p { margin-top: 8px; }

/* ---------- responsive ---------- */

@media (max-width: 720px) {
  .gear { display: none; }
  .row-pair { grid-template-columns: 1fr; }
  .btn-row .btn { flex: 1 1 auto; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

noscript .card { margin-top: 20px; }