/* Page-scoped styles for /try-it/ — recovered from the WP origin (custom-route.php inline blocks) 2026-07-16.
   Loads after the shared stack; selectors are scoped body.try-it-page. */

/* ===== /try-it/ — v3 shell adapted to the search/results form ===== */
body.try-it-page .brand-hero { padding: 60px 0 0; }
body.try-it-page .try-hero-inner { max-width: 760px; margin: 0 auto; padding: 0 2rem; text-align: center; }
body.try-it-page .brand-hero .hero-eyebrow { display: inline-block; }
body.try-it-page .brand-hero h1 { margin-left: auto; margin-right: auto; max-width: 720px; }
body.try-it-page .brand-hero .hero-sub-line { margin-left: auto; margin-right: auto; max-width: 560px; }
body.try-it-page .brand-hero .hero-sub { margin-left: auto; margin-right: auto; max-width: 600px; margin-top: 0.75rem; }
body.try-it-page .brand-hero .hero-meta { margin-left: auto; margin-right: auto; }

/* Social-proof strip below the H1 */
body.try-it-page .try-social {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-m); font-size: 0.7rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--grey-500);
  margin: 1.5rem auto 1.75rem;
}
body.try-it-page .try-social .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--red);
  animation: tryDot 2s ease-in-out infinite;
}
@keyframes tryDot { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }

/* Search bar — v3 styled */
body.try-it-page .try-search-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  max-width: 560px;
  margin: 0 auto 1rem;
  border: 1px solid var(--grey-300);
  background: var(--white);
}
body.try-it-page .try-search-bar input {
  font-family: var(--font-h);
  font-size: 0.95rem;
  padding: 0.85rem 1rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
}
body.try-it-page .try-search-bar input::placeholder { color: var(--grey-400); }
body.try-it-page .try-search-bar input:focus { background: var(--ground); }
body.try-it-page .try-search-bar button {
  position: relative;
  background: var(--ink); color: var(--white);
  border: 0; border-radius: 0;
  padding: 0 1.5rem;
  font-family: var(--font-h);
  font-size: 0.85rem; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
body.try-it-page .try-search-bar button:hover { background: var(--red); }
body.try-it-page .try-search-bar button:disabled { opacity: 0.6; cursor: wait; }
body.try-it-page .fp-spinner {
  display: none; width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: trySpin 0.6s linear infinite;
  margin-left: 0.5rem;
}
@keyframes trySpin { to { transform: rotate(360deg); } }
body.try-it-page .try-search-bar button.is-loading .fp-spinner { display: inline-block; }
body.try-it-page .try-search-hint {
  font-family: var(--font-m); font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--grey-500); margin: 1rem auto 0;
}
@media (max-width: 540px) { body.try-it-page .try-search-bar { grid-template-columns: 1fr; } body.try-it-page .try-search-bar button { padding: 0.85rem; } }

/* SSR'd example: section is visible from initial paint, no JS-render shift. */
body.try-it-page #fp-results-section { display: block; }

/* Results section — same width as homepage container */
body.try-it-page .try-results { padding: 60px 0 110px; background: var(--white); }
body.try-it-page .try-results .container { max-width: 880px; margin: 0 auto; padding: 0 2rem; }

/* Example banner */
body.try-it-page .fp-example-banner {
  background: var(--ground);
  border: 1px solid var(--grey-200);
  padding: 1rem 1.25rem;
  display: flex; gap: 1rem; align-items: center; justify-content: space-between;
  margin-bottom: 2rem; flex-wrap: wrap;
}
body.try-it-page .fp-example-banner-text { font-size: 0.88rem; color: var(--grey-700); }
body.try-it-page .fp-example-banner-text strong { color: var(--ink); }
body.try-it-page .fp-example-banner-btn {
  font-family: var(--font-m); font-size: 0.7rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--grey-300);
  text-decoration: none; padding: 0 0 2px;
  white-space: nowrap;
}
body.try-it-page .fp-example-banner-btn:hover { border-color: var(--ink); }

/* ===== fp-* results components — authored 2026-07-16 (the port shipped the
   markup with no styles; there was no WP predecessor for this section). ===== */

/* Cards grid */
body.try-it-page .fp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
body.try-it-page .fp-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  padding: 1.6rem 1.75rem 1.75rem;
  min-width: 0;
}
body.try-it-page .fp-card-full { grid-column: 1 / -1; }
@media (max-width: 760px) { body.try-it-page .fp-cards { grid-template-columns: 1fr; } }

body.try-it-page .fp-card-label {
  font-family: var(--font-m); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--grey-500); margin-bottom: 1rem;
}
body.try-it-page .fp-card-title { font-family: var(--font-h); font-size: 1.12rem; font-weight: 700; color: var(--ink); line-height: 1.35; }
body.try-it-page .fp-card-sub { font-size: 0.85rem; color: var(--grey-700); margin-top: 0.35rem; }

/* Stat grid (property card) */
body.try-it-page .fp-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem 1.25rem; margin-top: 1.4rem; }
@media (max-width: 540px) { body.try-it-page .fp-stat-grid { grid-template-columns: repeat(2, 1fr); } }
body.try-it-page .fp-stat-label { font-family: var(--font-m); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-500); }
body.try-it-page .fp-stat-value { font-family: var(--font-h); font-size: 1.05rem; font-weight: 600; color: var(--ink); margin-top: 0.3rem; font-variant-numeric: tabular-nums; }
body.try-it-page .fp-stat-value.accent { color: var(--red); }

/* Zone badge + rules */
body.try-it-page .fp-zone-badge { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
body.try-it-page .fp-zone-code {
  font-family: var(--font-m); font-size: 1.35rem; font-weight: 700; color: var(--ink);
  background: var(--ground); border: 1px solid var(--grey-200); padding: 0.2rem 0.6rem;
}
body.try-it-page .fp-zone-name { font-size: 0.85rem; color: var(--grey-700); }
body.try-it-page .fp-rules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem 1.25rem; margin-top: 1.3rem; }
@media (max-width: 540px) { body.try-it-page .fp-rules-grid { grid-template-columns: repeat(2, 1fr); } }
body.try-it-page .fp-rule-label { font-family: var(--font-m); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-500); }
body.try-it-page .fp-rule-value { font-size: 0.95rem; font-weight: 600; color: var(--ink); margin-top: 0.25rem; font-variant-numeric: tabular-nums; }

/* A control with NO number. Sits where a value would and must never be read as one,
   so it is a bordered mark rather than the plain tabular numeral the values use.
   Injected by try-it.js at render time, so these classes never appear in the built
   HTML the orphan-class lint scans. */
body.try-it-page .fp-rule-basis {
  display: inline-block; margin-top: 0.25rem;
  font-size: 0.72rem; font-weight: 600; line-height: 1.3;
  padding: 0.12rem 0.4rem; border: 1px solid;
}
/* rgba literals rather than color-mix, matching .fp-overlay-icon.high above —
   color-mix appears nowhere else in this codebase. --success is #0a7d33. */
body.try-it-page .fp-rule-basis.no-control { color: var(--success); border-color: rgba(10, 125, 51, 0.4); background: rgba(10, 125, 51, 0.07); }
body.try-it-page .fp-rule-basis.delegated { color: var(--amber); border-color: var(--amber-border); background: var(--amber-bg); }
body.try-it-page .fp-rule-basis.not-codified { color: var(--grey-700); border-color: var(--grey-300); background: var(--ground); }
/* The state's own reason. The label is a category; this is the evidence, and PRD §5.7
   requires it stay reachable beside the label. */
body.try-it-page .fp-rule-reason { font-size: 0.72rem; line-height: 1.4; color: var(--grey-500); margin-top: 0.3rem; }

/* Confidence meter */
body.try-it-page .fp-confidence { margin-top: 1.5rem; }
body.try-it-page .fp-confidence-label { font-family: var(--font-m); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-500); margin-bottom: 0.5rem; }
body.try-it-page .fp-confidence-track { height: 6px; background: var(--grey-200); }
body.try-it-page .fp-confidence-fill { height: 100%; background: var(--success); }
body.try-it-page .fp-confidence-pct { font-family: var(--font-m); font-size: 0.72rem; font-weight: 600; color: var(--success); margin-top: 0.45rem; }

/* Overlay list */
body.try-it-page .fp-overlay-list { display: flex; flex-direction: column; }
body.try-it-page .fp-overlay-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center;
  padding: 0.95rem 0; border-bottom: 1px solid var(--grey-200);
}
body.try-it-page .fp-overlay-item:last-child { border-bottom: 0; }
body.try-it-page .fp-overlay-icon {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-m); font-size: 0.72rem; font-weight: 700;
  border: 1px solid var(--grey-200); background: var(--ground); color: var(--grey-700);
}
body.try-it-page .fp-overlay-icon.high { background: rgba(200, 41, 46, 0.07); border-color: rgba(200, 41, 46, 0.35); color: var(--red); }
body.try-it-page .fp-overlay-icon.moderate { background: var(--amber-bg); border-color: var(--amber-border); color: var(--amber); }
body.try-it-page .fp-overlay-code { font-family: var(--font-m); font-size: 0.7rem; color: var(--grey-500); }
body.try-it-page .fp-overlay-name { font-size: 0.92rem; font-weight: 600; color: var(--ink); margin-top: 0.15rem; }
body.try-it-page .fp-overlay-desc { font-size: 0.8rem; color: var(--grey-500); margin-top: 0.15rem; }
body.try-it-page .fp-impact-badge {
  font-family: var(--font-m); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.2rem 0.55rem; border: 1px solid var(--grey-300); color: var(--grey-500); white-space: nowrap;
}
body.try-it-page .fp-impact-badge.high { color: var(--red); border-color: var(--red); }
body.try-it-page .fp-impact-badge.moderate { color: var(--amber); border-color: var(--amber); }

/* Loading skeletons */
body.try-it-page .fp-skeleton { background: var(--white); border: 1px solid var(--grey-200); padding: 1.75rem; }
body.try-it-page .fp-skel-line, body.try-it-page .fp-skel-box {
  background: var(--grey-200); animation: fpPulse 1.2s ease-in-out infinite;
}
body.try-it-page .fp-skel-line { height: 12px; margin-bottom: 0.8rem; }
body.try-it-page .fp-skel-line.short { width: 35%; }
body.try-it-page .fp-skel-line.med { width: 60%; }
body.try-it-page .fp-skel-line.long { width: 85%; }
body.try-it-page .fp-skel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; margin-top: 1.2rem; }
body.try-it-page .fp-skel-box { height: 44px; }
@keyframes fpPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { body.try-it-page .fp-skel-line, body.try-it-page .fp-skel-box { animation: none; } }

/* Error state */
body.try-it-page .fp-error { text-align: center; background: var(--white); border: 1px solid var(--grey-200); padding: 3rem 1.5rem; }
body.try-it-page .fp-error-icon { font-size: 1.6rem; }
body.try-it-page .fp-error-heading { font-family: var(--font-h); font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-top: 0.6rem; }
body.try-it-page .fp-error-body { font-size: 0.88rem; color: var(--grey-700); margin-top: 0.35rem; }
body.try-it-page .fp-error-retry {
  margin-top: 1.25rem; background: var(--ink); color: var(--white); border: 0;
  font-family: var(--font-h); font-size: 0.85rem; font-weight: 600;
  padding: 0.7rem 1.4rem; cursor: pointer;
}
body.try-it-page .fp-error-retry:hover { background: var(--red); }

/* Signup block — sits BELOW the results and covers nothing.
   Was `position: absolute` with a white gradient over the lower 68% of the result,
   which contradicted this page's own "NO SIGNUP TO TRY" promise. Now it is a normal
   block in flow: the visitor keeps the full answer and is ASKED, not gated. */
body.try-it-page .fp-gate-wrapper { position: relative; }
body.try-it-page .fp-gate-overlay {
  display: flex; justify-content: center;
  margin-top: 2.5rem;
}
body.try-it-page .fp-gate-card {
  background: var(--white); border: 1px solid var(--ink);
  box-shadow: 0 18px 44px -18px rgba(15, 17, 21, 0.28);
  max-width: 480px; width: 100%; padding: 2rem 2.25rem; text-align: center;
}
/* Primary action. The email form below is deliberately secondary — one obvious
   place to act, per the single-action-block rule. */
body.try-it-page .fp-gate-cta {
  display: inline-block; margin-top: 1.4rem;
  background: var(--ink); color: var(--white); text-decoration: none;
  font-family: var(--font-h); font-size: 0.95rem; font-weight: 600;
  padding: 0.85rem 1.9rem; transition: background 0.15s;
}
body.try-it-page .fp-gate-cta:hover { background: var(--red); }
body.try-it-page .fp-gate-sep {
  display: flex; align-items: center; gap: 0.75rem;
  margin-top: 1.6rem; color: var(--grey-500);
  font-family: var(--font-m); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
}
body.try-it-page .fp-gate-sep::before,
body.try-it-page .fp-gate-sep::after { content: ''; flex: 1; height: 1px; background: var(--grey-300); }
body.try-it-page .fp-gate-eyebrow { font-family: var(--font-m); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); }
body.try-it-page .fp-gate-heading { font-family: var(--font-h); font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); margin-top: 0.7rem; }
body.try-it-page .fp-gate-body { font-size: 0.88rem; line-height: 1.6; color: var(--grey-700); margin-top: 0.6rem; }
body.try-it-page .fp-gate-form { display: grid; grid-template-columns: 1fr auto; margin-top: 0.9rem; border: 1px solid var(--grey-300); }
body.try-it-page .fp-gate-form input {
  font-family: var(--font-h); font-size: 0.9rem; color: var(--ink);
  padding: 0.75rem 0.9rem; border: 0; outline: 0; background: var(--white); min-width: 0;
}
body.try-it-page .fp-gate-form input:focus { background: var(--ground); }
/* Secondary by design: the red fill used to make this the loudest thing on the card,
   so the mailing-list opt-in outranked the actual conversion. Muted so "Start free"
   is unambiguously the primary action (inner pages use the BLACK primary). */
body.try-it-page .fp-gate-form button {
  background: var(--grey-100); color: var(--ink); border: 0; cursor: pointer;
  font-family: var(--font-h); font-size: 0.85rem; font-weight: 600;
  padding: 0 1.2rem; white-space: nowrap; transition: background 0.15s, color 0.15s;
}
body.try-it-page .fp-gate-form button:hover { background: var(--ink); color: var(--white); }
body.try-it-page .fp-gate-form button:disabled { opacity: 0.6; cursor: wait; }
@media (max-width: 480px) {
  body.try-it-page .fp-gate-form { grid-template-columns: 1fr; }
  body.try-it-page .fp-gate-form button { padding: 0.75rem; }
}
body.try-it-page .fp-gate-disclaimer { font-family: var(--font-m); font-size: 0.62rem; letter-spacing: 0.06em; color: var(--grey-500); margin-top: 0.8rem; }
body.try-it-page .fp-gate-success { display: none; font-size: 0.9rem; font-weight: 600; color: var(--success); margin-top: 1rem; line-height: 1.6; }
body.try-it-page .fp-gate-success.visible { display: block; }
body.try-it-page .fp-gate-success.is-err { color: var(--red); }
body.try-it-page .fp-gate-success a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Attribution */
body.try-it-page .fp-attribution { font-family: var(--font-m); font-size: 0.68rem; line-height: 1.7; color: var(--grey-500); margin-top: 3rem; text-align: center; }

/* Container cells (grid children need min-width:0 so long values can shrink) */
body.try-it-page .fp-results-section { display: block; }
body.try-it-page .fp-stat, body.try-it-page .fp-rule-item, body.try-it-page .fp-overlay-text { min-width: 0; }
/* Low severity keeps the neutral default — stated explicitly for the class lint */
body.try-it-page .fp-overlay-icon.low { background: var(--ground); }
body.try-it-page .fp-impact-badge.low { color: var(--grey-500); }

/* ============ MOBILE ============
   iOS Safari zooms the whole viewport when a focused input's font-size is under 16px.
   Both fields on this page were under it (address 15.2px, email 14.4px), so tapping
   the address bar — the single most important interaction on the page — jerked the
   page in and left the user panning a zoomed layout. 16px is a functional floor on
   touch, not a type-scale preference. Measured 2026-07-30 at 390x844.
   Tap targets go to the 44px floor at the same breakpoint. */
@media (max-width: 640px) {
  body.try-it-page .try-search-bar { grid-template-columns: 1fr; }
  body.try-it-page .try-search-bar input { font-size: 16px; padding: 0.9rem 1rem; }
  body.try-it-page .try-search-bar button { padding: 0.95rem 1.5rem; min-height: 48px; }
  body.try-it-page .fp-gate-form input { font-size: 16px; min-height: 46px; }
  body.try-it-page .fp-gate-form button { min-height: 46px; }
  /* Full-width primary so it is thumb-sized rather than a 149px pill. */
  body.try-it-page .fp-gate-cta { display: block; width: 100%; padding: 0.95rem 1rem; }
  body.try-it-page .fp-gate-card { padding: 1.6rem 1.25rem; }
}

/* ── Coverage gaps ──────────────────────────────────────────────────────────
   Layers that did not answer on a live lookup. Amber, not red: the site is not
   necessarily constrained, the question is simply unanswered — and not green,
   because rendering it as a pass is the exact defect this element exists to
   stop. Sits above the cards so it qualifies everything below it. */
body.try-it-page .fp-data-gaps {
  border: 2px solid var(--amber);
  background: var(--amber-bg);
  color: var(--ink);
  padding: 0.85rem 1.1rem;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
  line-height: 1.55;
}
body.try-it-page .fp-data-gaps strong { color: var(--amber); }

/* "Showing 12 of 15" — the demo caps the overlay list, and a cap nobody is told
   about reads as a complete answer. */
body.try-it-page .fp-overlay-more {
  font-size: 0.8rem;
  color: var(--grey-500);
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--grey-200);
}

/* Degraded coverage — the bar and its label must stop being green. A green 55%
   labelled "Partial" still reads as a pass at a glance, which is the same
   green-summary-over-a-broken-thing failure the gap banner above exists to fix,
   just smaller and easier to miss. */
body.try-it-page .fp-confidence-fill.partial { background: var(--amber); }
body.try-it-page .fp-confidence-pct.partial { color: var(--amber); }

/* ── Address autocomplete ────────────────────────────────────────────────────
   Our own dropdown, fed by a Worker-proxied Places call. No Google widget and no
   Google JS: the page's mobile Lighthouse is 98 because third-party script was
   taken off the critical path, and a Maps bundle would hand that straight back. */
body.try-it-page .try-search-bar { position: relative; }
body.try-it-page .fp-suggest {
  /* Fixed + portalled to <body> on desktop — see try-it.js. `absolute` here was
     clipped by .brand-hero's overflow:hidden, slicing the second suggestion in
     half. Geometry (left/top/width) is set inline from the search bar's rect. */
  position: fixed;
  z-index: 120;
  background: var(--white);
  border: 1px solid var(--ink);
  border-top: 0;
  /* The proxy caps suggestions at 5, and 5 rows measure ~325px — a 19rem box cut
     the last one in half, which reads as broken rather than as "scroll for more".
     Sized to fit the real maximum; overflow stays as a bound, not a design. */
  max-height: 24rem;
  overflow-y: auto;
  text-align: left;
}
body.try-it-page .fp-suggest-item {
  display: block;
  padding: 0.6rem 0.9rem;
  cursor: pointer;
  border-bottom: 1px solid var(--grey-200);
}
body.try-it-page .fp-suggest-item:last-child { border-bottom: 0; }
body.try-it-page .fp-suggest-item:hover,
body.try-it-page .fp-suggest-item.is-active { background: var(--ground); }
body.try-it-page .fp-suggest-main { display: block; font-size: 0.92rem; color: var(--ink); }
body.try-it-page .fp-suggest-sec { display: block; font-size: 0.78rem; color: var(--grey-500); margin-top: 0.1rem; }


/* Stacked layout (≤640px, where .try-search-bar goes to a single column): drop
   out of absolute positioning so the list sits BETWEEN the input and the button,
   which is why the markup puts it there. Left floating at top:100% it rendered
   under the button — not overlapping it, but with a full-width black CTA wedged
   between the text you just typed and the suggestions for it. Caught on a 390px
   render; the overlap assertion passed and told me nothing. */
@media (max-width: 640px) {
  body.try-it-page .fp-suggest {
    position: static;
    border: 0;
    border-top: 1px solid var(--grey-200);
    /* In-flow here, so let the PAGE scroll. A capped, inner-scrolling list inside
       a stacked search bar means two nested scroll regions on a touch screen,
       which is worse than a slightly longer list. */
    max-height: none;
  }
}