/*
Theme Name: Focal PREEMPT
Theme URI: https://focalresearch.co.uk/
Author: Focal Research
Description: Custom block theme for the Focal Research corporate site rebuild around PREEMPT.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 8.1
Version: 0.4.21
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: focal-preempt
*/

/* ==========================================================================
   Contents
   1.  Tokens not expressible in theme.json
   2.  Focus and skip link
   3.  Header
   4.  Arcs motif
   5.  Hero
   6.  Panels - marketing vs data
   7.  Five-question sequence
   8.  Figures and proof tiles
   9.  Bands
   10. Two-path comparison
   11. Product screenshot frames
   12. Editorial and post meta
   13. Footer
   14. Utilities
   15. Reduced motion and print
   ========================================================================== */

/* 1. Tokens -------------------------------------------------------------- */

:root {
  --preempt-radius-data: 4px;
  --preempt-radius-soft: 1.25rem;
  --preempt-shadow-soft: 0 8px 24px rgba(33, 39, 44, 0.06);
  --preempt-arc-weight: 2px;
  --preempt-gap: 1rem;
}

/* 2. Focus and skip link -------------------------------------------------
   Two-tone ring so it stays visible on the sand ground, on white panels and
   on the dark band. Never remove the outline without replacing it. */

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-navigation-item__content:focus-visible {
  outline: 3px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(33, 39, 44, 0.28);
  border-radius: 2px;
}

.preempt-dark-band :where(a, button, summary, [tabindex]):focus-visible,
.preempt-site-footer :where(a, button, summary, [tabindex]):focus-visible {
  box-shadow: 0 0 0 6px rgba(247, 244, 239, 0.4);
}

.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.screen-reader-text:focus {
  clip-path: none;
  height: auto;
  left: 5px;
  top: 5px;
  width: auto;
}

.skip-link.screen-reader-text:focus {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--base);
  font-family: var(--wp--preset--font-family--body);
  font-weight: 700;
  padding: 0.85rem 1.25rem;
  z-index: 100;
}

/* 2b. Section gutter ------------------------------------------------------
   Horizontal padding lives on section wrappers rather than being repeated
   inline in every template. Templates and patterns set vertical rhythm only.
   The root padding variables come from theme.json via
   useRootPaddingAwareAlignments, with a literal fallback. */

.preempt-section {
  padding-left: var(--wp--style--root--padding-left, clamp(1.25rem, 4vw, 2.5rem));
  padding-right: var(--wp--style--root--padding-right, clamp(1.25rem, 4vw, 2.5rem));
}

/* 3. Header --------------------------------------------------------------- */

.preempt-site-header {
  background: var(--wp--preset--color--base);
  border-bottom: 1px solid var(--wp--preset--color--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.preempt-site-header .alignwide {
  max-width: 100%;
  width: 100%;
}

/* Only translucent where the blur can actually do something. */
@supports (backdrop-filter: blur(1px)) {
  .preempt-site-header {
    backdrop-filter: blur(18px);
    background: color-mix(
      in srgb,
      var(--wp--preset--color--base) 82%,
      transparent
    );
  }
}

.preempt-wordmark {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.preempt-brand {
  min-width: max-content;
}

.preempt-brand-mark {
  flex: 0 0 auto;
  line-height: 0;
}

.preempt-brand-mark img {
  display: block;
}

.preempt-header-cta .wp-block-button__link {
  padding: 0.6rem 1.15rem;
}

.preempt-primary-nav {
  white-space: nowrap;
}

.preempt-page-content > :where(:not(.alignwide):not(.alignfull):not(.preempt-section)) {
  max-width: var(--wp--style--global--content-size);
}

/* 4. Section rules -------------------------------------------------------- */

.preempt-arc-rule {
  display: none;
}

/* 5. Hero ----------------------------------------------------------------- */

.preempt-hero {
  overflow: hidden;
  position: relative;
}

/* A single flat rule at the top of the hero, in the brand orange. One
   deliberate mark instead of two vague washes. */
.preempt-hero::before {
  background: var(--wp--preset--color--accent);
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.preempt-hero > * {
  position: relative;
}

.preempt-kicker {
  align-items: center;
  color: var(--wp--preset--color--accent-text);
  display: flex;
  font-size: 0.8rem;
  font-weight: 700;
  gap: 0.7rem;
  letter-spacing: 0.16em;
  margin-bottom: 0.9rem;
  text-transform: uppercase;
}

/* the rule is what makes it read as editorial rather than as a SaaS eyebrow */
.preempt-kicker::before {
  background: currentColor;
  content: "";
  flex: 0 0 2.5rem;
  height: 2px;
}

.preempt-display {
  line-height: 0.98;
  max-width: 16ch;
}

.preempt-intro {
  color: var(--wp--preset--color--ink-soft);
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.45rem);
  max-width: 35rem;
}

/* Hero evidence panel. Numbers above the fold, in the product's own boxed
   language, standing in for the screenshots that do not exist yet. */

.preempt-evidence {
  align-self: start;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--preempt-radius-data);
  overflow: hidden;
}

.preempt-evidence-head {
  background: var(--wp--preset--color--ink-deep);
  color: var(--wp--preset--color--base);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0;
  padding: 0.7rem 1.15rem;
  text-transform: uppercase;
}

.preempt-evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.preempt-evidence-cell {
  border-bottom: 1px solid var(--wp--preset--color--line);
  border-right: 1px solid var(--wp--preset--color--line);
  padding: 1.15rem 1.15rem 1.25rem;
}

.preempt-evidence-cell:nth-child(2n) {
  border-right: 0;
}

.preempt-evidence-cell:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.preempt-evidence-cell .n {
  color: var(--wp--preset--color--accent-text);
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.preempt-evidence-cell .l {
  color: var(--wp--preset--color--ink-soft);
  display: block;
  font-size: 0.8rem;
  line-height: 1.35;
  margin-top: 0.4rem;
}

@media (max-width: 460px) {
  .preempt-evidence-grid {
    grid-template-columns: 1fr;
  }
  .preempt-evidence-cell {
    border-right: 0;
  }
}

/* 6. Panels --------------------------------------------------------------
   Two deliberately different families.

   .preempt-panel  marketing surface. Soft, rounded, lifted.
   .preempt-data   evidence surface. Flat, boxed, hairline border. This
                   borrows the platform's panel language so the site and
                   the product read as one family. Use it for anything
                   carrying a number, a screenshot or a data claim. */

.preempt-panel {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--preempt-radius-soft);
  box-shadow: var(--preempt-shadow-soft);
  height: 100%;
}

/* register_block_style() emits these; they map onto the two panel families
   so the editor options actually do something. */
.wp-block-group.is-style-marketing-panel {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--preempt-radius-soft);
  box-shadow: var(--preempt-shadow-soft);
}

.wp-block-group.is-style-data-panel {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--preempt-radius-data);
}

.preempt-data {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--preempt-radius-data);
  box-shadow: none;
  height: 100%;
}

.preempt-data-head {
  border-bottom: 1px solid var(--wp--preset--color--line-strong);
  color: var(--wp--preset--color--ink-soft);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: -1.5rem -1.5rem 1.25rem;
  padding: 0.6rem 1.5rem;
  text-transform: uppercase;
}

.preempt-callout {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-left: 6px solid var(--wp--preset--color--signal);
  border-radius: var(--preempt-radius-data);
}

.preempt-coverage-home-link {
  border-left-width: 3px;
}

.preempt-coverage-home-link .preempt-kicker {
  font-size: 0.68rem;
}

.preempt-coverage-home-link .preempt-section-heading {
  font-size: clamp(1.2rem, 1.5vw, 1.45rem);
  max-width: 34rem;
}

.preempt-coverage-home-link .wp-block-button__link {
  padding: 0.65rem 1rem;
}

/* 7. Five-question sequence ----------------------------------------------
   Steps 1-4 are compact evidence cards joined by an arc hop. Step 5 is not
   another card: it breaks out into its own band because it is the
   conclusion of the argument, not a fifth capability. */

/* The grid itself is a core grid layout, so column behaviour stays editable
   in the site editor. */

.preempt-step {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--preempt-radius-data);
  height: 100%;
  position: relative;
}

.preempt-step > * {
  margin-block-start: 0.7rem;
}

.preempt-step > *:first-child {
  margin-block-start: 0;
}

.preempt-step h3.wp-block-heading {
  min-height: 3.05rem;
}

.preempt-sequence > .preempt-step:not(:last-child)::after {
  display: none;
}

/* Once the grid wraps, a horizontal hop would point at nothing. */
@media (max-width: 1100px) {
  .preempt-sequence > .preempt-step::after {
    display: none;
  }
}

@media (max-width: 700px) {
  .preempt-step h3.wp-block-heading {
    min-height: 0;
  }
}

.preempt-step-number {
  align-items: center;
  background: var(--wp--preset--color--accent);
  border-radius: 999px;
  color: var(--wp--preset--color--ink);
  display: inline-flex;
  font-size: 0.85rem;
  font-weight: 700;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.preempt-step-outcome {
  background:
    linear-gradient(135deg, rgba(240, 130, 30, 0.14), rgba(31, 124, 196, 0.07)),
    var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--preempt-radius-data);
  border-top: 4px solid var(--wp--preset--color--accent);
  position: relative;
}

/* Non-colour cue: the outcome block is labelled and set larger, so the
   distinction survives greyscale and colour-blind viewing. */
.preempt-step-outcome .preempt-outcome-label {
  color: var(--wp--preset--color--accent-text);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}


/* 7b. Pricing: configured layers and the ranking ladder ------------------
   Both use CSS counters so the numbers are not editable content that can
   drift out of sequence when someone reorders a block. */

.preempt-layers {
  counter-reset: layer;
  display: grid;
  gap: 1rem;
}

.preempt-layer {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--preempt-radius-data);
  counter-increment: layer;
  padding: 1.5rem 1.5rem 1.5rem 4.5rem;
  position: relative;
}

.preempt-layer::before {
  align-items: center;
  background: var(--wp--preset--color--accent);
  border-radius: 999px;
  color: var(--wp--preset--color--ink);
  content: counter(layer);
  display: flex;
  font-weight: 700;
  height: 2rem;
  justify-content: center;
  left: 1.5rem;
  position: absolute;
  top: 1.5rem;
  width: 2rem;
}

@media (max-width: 600px) {
  .preempt-layer {
    padding: 3.75rem 1.25rem 1.25rem;
  }
  .preempt-layer::before {
    left: 1.25rem;
    top: 1.25rem;
  }
}

.preempt-layer-note {
  border-top: 1px solid var(--wp--preset--color--line);
  color: var(--wp--preset--color--ink-soft);
  font-size: 0.9rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
}

.preempt-layer-note strong {
  color: var(--wp--preset--color--accent-text);
}

.preempt-rank {
  counter-reset: rank;
  display: grid;
  gap: 0.4rem;
}

.preempt-rank-row {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--preempt-radius-data);
  counter-increment: rank;
  overflow: hidden;
  padding: 0.75rem 0.9rem 0.75rem 3rem;
  position: relative;
}

.preempt-rank-row::before {
  color: var(--wp--preset--color--accent-text);
  content: counter(rank);
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.25rem;
  font-weight: 600;
  left: 1.1rem;
  line-height: 1;
  position: absolute;
  top: 0.85rem;
}

/* the bar fades down the ladder, so strength of match reads at a glance */
.preempt-rank-row::after {
  background: var(--wp--preset--color--accent);
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  top: 0;
  width: 4px;
}

.preempt-rank-row:nth-child(2)::after { opacity: 0.8; }
.preempt-rank-row:nth-child(3)::after { opacity: 0.6; }
.preempt-rank-row:nth-child(4)::after { opacity: 0.4; }
.preempt-rank-row:nth-child(5)::after { opacity: 0.25; }
.preempt-rank-row:nth-child(n + 4)::before { color: var(--wp--preset--color--ink-soft); }

.preempt-rank-row p {
  margin: 0;
}

.preempt-rank-row p + p {
  color: var(--wp--preset--color--ink-soft);
  font-size: 0.85rem;
  margin-top: 0.15rem;
}

/* 8. Figures and proof tiles ---------------------------------------------- */

.preempt-figure {
  color: var(--wp--preset--color--accent-text);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(2.6rem, 2.1rem + 2vw, 4.6rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 0.85;
  margin-bottom: 0;
}

.preempt-figure-word {
  font-family: var(--wp--preset--font-family--body);
  font-size: clamp(1.65rem, 1.35rem + 1.1vw, 2.55rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.05;
}

.preempt-figure-note {
  color: var(--wp--preset--color--ink-soft);
  font-size: 0.8rem;
  margin-top: 0.15rem;
}

.preempt-proof {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--preempt-radius-data);
  height: 100%;
}

.preempt-proof-label {
  color: var(--wp--preset--color--ink-soft);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.preempt-proof-value {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.35rem, 1.2rem + 0.5vw, 1.75rem);
  line-height: 1.15;
  margin-bottom: 0.6rem;
}

.preempt-section-heading {
  max-width: 22ch;
}

/* 9. Bands ---------------------------------------------------------------- */

/* Sand rather than another near-white. Panels have to separate from the
   ground or the whole page reads as one flat wash. */
.preempt-band {
  background: var(--wp--preset--color--sand);
  border-block: 1px solid var(--wp--preset--color--line);
}

/* The page's single loud moment. Ink on the brand orange clears AA at
   5.69:1, so the accent can finally be used at scale rather than in
   eyebrow-sized fragments. */
.preempt-accent-band {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--ink);
}

.preempt-accent-band :is(h1, h2, h3, p) {
  color: var(--wp--preset--color--ink);
}

.preempt-accent-band .preempt-kicker {
  color: var(--wp--preset--color--ink);
}

.preempt-accent-band .wp-block-button__link {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--base);
}

.preempt-accent-band .wp-block-button.is-style-outline-accent .wp-block-button__link {
  background: transparent;
  border-color: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--ink);
}

.preempt-accent-band :where(a, button):focus-visible {
  outline-color: var(--wp--preset--color--ink);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.5);
}

.preempt-dark-band {
  background:
    radial-gradient(circle at top right, rgba(31, 124, 196, 0.18), transparent 28%),
    var(--wp--preset--color--ink-deep);
  color: var(--wp--preset--color--base);
}

.preempt-dark-band :is(h1, h2, h3, h4, h5, h6) {
  color: var(--wp--preset--color--base);
}

.preempt-dark-band .preempt-muted,
.preempt-dark-band p {
  color: rgba(247, 244, 239, 0.82);
}

/* On the dark ground the bright brand orange clears AA at 5.8:1, so the
   text tokens are not needed here. */
.preempt-dark-band .preempt-kicker,
.preempt-dark-band .preempt-figure {
  color: var(--wp--preset--color--accent);
}

.preempt-dark-band .preempt-data,
.preempt-dark-band .preempt-panel,
.preempt-dark-band .preempt-path,
.preempt-dark-band .preempt-callout {
  background: rgba(247, 244, 239, 0.05);
  border-color: rgba(247, 244, 239, 0.22);
  box-shadow: none;
}

/* the primary path keeps its accent edge on the dark ground */
.preempt-dark-band .preempt-callout {
  border-left-color: var(--wp--preset--color--signal);
}

.preempt-dark-band .preempt-path--primary {
  border-top-color: var(--wp--preset--color--accent);
}

.preempt-dark-band a:not(.wp-block-button__link) {
  color: var(--wp--preset--color--base);
  text-decoration-color: var(--wp--preset--color--accent);
  text-underline-offset: 0.2em;
}

/* 9b. Landlord record ----------------------------------------------------- */

.preempt-illustrative {
  background: #fdf5ec;
  border: 1px solid #a5540b;
  border-bottom: 0;
  color: #5f2d04;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.7rem 1rem;
}

.preempt-record {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--preempt-radius-data);
  box-shadow: none;
  overflow: hidden;
}

.preempt-record-head {
  align-items: center;
  background: color-mix(in srgb, var(--wp--preset--color--sand) 24%, var(--wp--preset--color--surface));
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  justify-content: space-between;
  padding: 0.75rem clamp(1rem, 2vw, 1.25rem);
}

.preempt-record-head .preempt-muted {
  color: var(--wp--preset--color--ink-soft);
  font-size: 0.95rem;
  margin: 0;
}

.preempt-badge {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: 999px;
  color: var(--wp--preset--color--ink-soft);
  display: inline-flex;
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.55rem;
  text-transform: uppercase;
}

.preempt-record-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.preempt-record-fact {
  border-bottom: 1px solid var(--wp--preset--color--line);
  border-right: 1px solid var(--wp--preset--color--line);
  min-height: 6.25rem;
  padding: 1rem 1.1rem;
}

.preempt-record-fact:nth-child(3n) {
  border-right: 0;
}

.preempt-record-fact:nth-last-child(-n + 3) {
  border-bottom: 0;
}

.preempt-record-fact .k {
  color: var(--wp--preset--color--ink-soft);
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
}

.preempt-record-fact .v {
  color: var(--wp--preset--color--ink);
  display: block;
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.4;
}

.preempt-record-fact:first-child .v {
  color: var(--wp--preset--color--ink);
  font-size: 1.7rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  line-height: 1.05;
}

.preempt-stock-explainer {
  border-top: 1px solid var(--wp--preset--color--line);
  padding: 0.75rem 1.25rem;
}

.preempt-stock-explainer summary {
  color: var(--wp--preset--color--ink-soft);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.35;
}

.preempt-stock-explainer summary::marker {
  color: var(--wp--preset--color--accent-text);
}

.preempt-stock-explainer p {
  color: var(--wp--preset--color--ink-soft);
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0.65rem 0 0;
  max-width: 64rem;
}

.preempt-record-body {
  border-top: 1px solid var(--wp--preset--color--line);
  padding: 1.25rem;
}

.preempt-record-body h3 {
  font-family: var(--wp--preset--font-family--body);
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.3;
  margin: 0 0 0.8rem;
}

.preempt-record-rows {
  border-top: 1px solid var(--wp--preset--color--line);
}

.preempt-record-row {
  align-items: center;
  border-bottom: 1px solid var(--wp--preset--color--line);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.62rem 0;
}

.preempt-record-row .r {
  color: var(--wp--preset--color--ink);
  flex: 0 0 auto;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
}

.preempt-record-row b {
  color: inherit;
  font: inherit;
}

.preempt-record-row small {
  color: var(--wp--preset--color--ink-soft);
  display: block;
  font-size: 0.84rem;
  font-weight: 450;
  line-height: 1.45;
  margin-top: 0.2rem;
  max-width: 34rem;
}

.preempt-record-upgrade {
  background: color-mix(in srgb, var(--wp--preset--color--signal) 7%, var(--wp--preset--color--surface));
}

.preempt-record-upgrade > div:first-child {
  max-width: 42rem;
}

.preempt-record-upgrade p {
  color: var(--wp--preset--color--ink-soft);
  font-size: 0.94rem;
  line-height: 1.55;
  margin: 0;
}

.preempt-record-upgrade ul {
  display: grid;
  gap: 0.48rem 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.preempt-record-upgrade li {
  color: var(--wp--preset--color--ink);
  font-size: 0.92rem;
  line-height: 1.4;
  padding-left: 1rem;
  position: relative;
}

.preempt-record-upgrade li::before {
  background: var(--wp--preset--color--accent);
  border-radius: 999px;
  content: "";
  height: 0.38rem;
  left: 0;
  position: absolute;
  top: 0.55rem;
  width: 0.38rem;
}

.preempt-record-upgrade-foot {
  align-items: center;
  border-top: 1px solid var(--wp--preset--color--line);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 1rem;
  padding-top: 1rem;
}

.preempt-record-upgrade-foot p {
  max-width: 36rem;
}

.preempt-record-upgrade-foot a {
  background: var(--wp--preset--color--ink);
  border: 1px solid var(--wp--preset--color--ink);
  border-radius: 999px;
  color: var(--wp--preset--color--surface);
  flex: 0 0 auto;
  font-size: 0.88rem;
  font-weight: 750;
  line-height: 1;
  padding: 0.7rem 0.95rem;
  text-decoration: none;
}

.preempt-record-upgrade-foot a:hover,
.preempt-record-upgrade-foot a:focus {
  background: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--ink);
}

.preempt-lookup {
  display: grid;
  gap: 1.5rem;
}

.preempt-lookup-form {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--preempt-radius-data);
  padding: clamp(1rem, 2vw, 1.5rem);
}

.preempt-lookup-form label {
  color: var(--wp--preset--color--ink-soft);
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 0.55rem;
  text-transform: uppercase;
}

.preempt-lookup-form > div {
  display: flex;
  gap: 0.75rem;
}

.preempt-lookup-form input {
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--preempt-radius-data);
  color: var(--wp--preset--color--ink);
  flex: 1 1 auto;
  font: inherit;
  min-height: 3rem;
  min-width: 0;
  padding: 0.75rem 0.9rem;
}

.preempt-lookup-form button {
  background: var(--wp--preset--color--accent-strong);
  border: 1px solid var(--wp--preset--color--accent-strong);
  border-radius: var(--preempt-radius-data);
  color: var(--wp--preset--color--base);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  min-height: 3rem;
  padding: 0.75rem 1rem;
}

.preempt-lookup-summary {
  color: var(--wp--preset--color--ink-soft);
  font-size: 0.95rem;
}

.preempt-landlord-results {
  display: grid;
  gap: 0.75rem;
}

.preempt-landlord-result {
  align-items: start;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--preempt-radius-data);
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.55fr);
  padding: 1rem;
}

.preempt-landlord-result h3 {
  font-size: var(--wp--preset--font-size--md);
  margin: 0 0 0.25rem;
}

.preempt-landlord-result h3 a {
  color: var(--wp--preset--color--ink);
  text-decoration-color: var(--wp--preset--color--accent);
  text-underline-offset: 0.18em;
}

.preempt-landlord-result p {
  margin: 0;
}

.preempt-landlord-result dl {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.preempt-landlord-result dl > div {
  display: grid;
  grid-template-rows: minmax(2.55rem, auto) auto;
}

.preempt-landlord-result dt {
  color: var(--wp--preset--color--ink-soft);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
}

.preempt-landlord-result dd {
  color: var(--wp--preset--color--accent-text);
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  margin: 0.15rem 0 0;
}

.preempt-landlord-record-template {
  background: var(--wp--preset--color--base);
}

.preempt-landlord-mini-header {
  background: color-mix(in srgb, var(--wp--preset--color--base) 92%, var(--wp--preset--color--paper));
  border-bottom: 1px solid var(--wp--preset--color--line);
  padding-bottom: 0.65rem;
  padding-top: 0.65rem;
}

.preempt-landlord-mini-brand {
  align-items: center;
  color: var(--wp--preset--color--ink);
  display: inline-flex;
  font-size: 0.88rem;
  font-weight: 700;
  gap: 0.65rem;
  letter-spacing: 0.12em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.preempt-landlord-mini-brand img {
  display: block;
  height: 2rem;
  width: 2rem;
}

.preempt-landlord-page {
  padding-bottom: var(--wp--preset--spacing--50);
  padding-top: 2rem;
}

.preempt-landlord-detail-wrap {
  margin-left: auto;
  margin-right: auto;
  max-width: 54rem;
}

.preempt-landlord-detail-header {
  display: grid;
  gap: 0.55rem;
  margin-bottom: 1rem;
}

.preempt-landlord-title-row {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.preempt-landlord-detail-header .preempt-kicker,
.preempt-landlord-detail-header .preempt-page-title {
  margin: 0;
}

.preempt-landlord-detail-header .preempt-page-title {
  font-size: 2.15rem;
  letter-spacing: 0;
  line-height: 1.08;
  max-width: 15em;
}

.preempt-landlord-back {
  margin: 0;
}

.preempt-landlord-back a {
  align-items: center;
  background: transparent;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--preempt-radius-data);
  color: var(--wp--preset--color--ink-soft);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  min-height: 1.9rem;
  padding: 0.32rem 0.55rem;
  text-decoration: none;
}

.preempt-landlord-back a::before {
  content: "\2190";
  font-size: 0.85rem;
  line-height: 1;
  margin-right: 0.35rem;
}

.preempt-landlord-back a:hover,
.preempt-landlord-back a:focus {
  background: var(--wp--preset--color--surface);
  border-color: var(--wp--preset--color--line-strong);
}

.preempt-landlord-note {
  color: var(--wp--preset--color--ink-soft);
  font-size: 0.92rem;
  margin: 1rem 0 0;
}

.preempt-lookup-empty {
  padding: 1rem;
}

@media (max-width: 900px) {
  .preempt-record-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .preempt-record-fact:nth-child(3n) {
    border-right: 1px solid var(--wp--preset--color--line);
  }

  .preempt-record-fact:nth-child(2n) {
    border-right: 0;
  }

  .preempt-record-fact:nth-last-child(-n + 3) {
    border-bottom: 1px solid var(--wp--preset--color--line);
  }

  .preempt-record-fact:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

@media (max-width: 560px) {
  .preempt-landlord-page {
    padding-top: 1.4rem;
  }

  .preempt-landlord-mini-header {
    padding-bottom: 0.55rem;
    padding-top: 0.55rem;
  }

  .preempt-landlord-mini-brand {
    font-size: 0.78rem;
  }

  .preempt-landlord-mini-brand img {
    height: 1.75rem;
    width: 1.75rem;
  }

  .preempt-landlord-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.55rem;
  }

  .preempt-landlord-detail-header .preempt-page-title {
    font-size: 1.85rem;
    max-width: none;
  }

  .preempt-lookup-form > div,
  .preempt-landlord-result {
    grid-template-columns: 1fr;
  }

  .preempt-lookup-form > div {
    display: grid;
  }

  .preempt-landlord-result dl {
    grid-template-columns: 1fr;
  }

  .preempt-record-facts {
    grid-template-columns: 1fr;
  }

  .preempt-record-fact,
  .preempt-record-fact:nth-child(2n),
  .preempt-record-fact:nth-child(3n) {
    border-right: 0;
  }

  .preempt-record-fact:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--wp--preset--color--line);
  }

  .preempt-record-fact:last-child {
    border-bottom: 0;
  }

  .preempt-record-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }

  .preempt-record-row .r {
    text-align: left;
  }

  .preempt-record-upgrade ul {
    grid-template-columns: 1fr;
  }

  .preempt-record-upgrade-foot {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* 10. Two-path comparison -------------------------------------------------
   Differentiated by border weight, a label and an ordinal, not by hue
   alone. */

.preempt-path {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--preempt-radius-data);
  border-top: 3px solid var(--wp--preset--color--line-strong);
  height: 100%;
}

.preempt-path--primary {
  border-top: 6px solid var(--wp--preset--color--accent);
}

.preempt-path-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* 11. Product screenshot frames ------------------------------------------
   The brief requires tight crops, never full-screen captures. The frame
   enforces the crop so it does not depend on whoever uploads the image. */

.preempt-shot {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--preempt-radius-data);
  overflow: hidden;
}

.preempt-shot .wp-block-image {
  margin: 0;
}

.preempt-shot img {
  aspect-ratio: 16 / 10;
  display: block;
  object-fit: cover;
  object-position: top left;
  width: 100%;
}

.preempt-shot figcaption,
.preempt-shot .preempt-shot-caption {
  border-top: 1px solid var(--wp--preset--color--line-strong);
  color: var(--wp--preset--color--ink-soft);
  font-size: 0.8rem;
  margin: 0;
  padding: 0.6rem 0.9rem;
}

/* 12. Editorial and post meta --------------------------------------------- */

.preempt-post-meta {
  color: var(--wp--preset--color--ink-soft);
  font-size: 0.85rem;
}

.preempt-post-meta a {
  color: inherit;
}

.preempt-updated {
  color: var(--wp--preset--color--accent-text);
  font-weight: 700;
}

.preempt-entry :is(h2, h3) {
  margin-top: 2.25rem;
}

.preempt-mini-list {
  border-top: 1px solid var(--wp--preset--color--line);
  padding-top: 1rem;
}

.preempt-mini-list strong {
  color: var(--wp--preset--color--ink);
}

.preempt-muted {
  color: var(--wp--preset--color--ink-soft);
}

/* FAQ - plain question and answer pairs. Deliberately not an accordion:
   collapsed answers extract badly and hide the copy that earns the ranking. */

.preempt-faq :is(h2, h3) {
  margin-bottom: 1.25rem;
}

.preempt-faq-item {
  border-top: 1px solid var(--wp--preset--color--line);
  padding-top: 1.5rem;
}

.preempt-faq-item + .preempt-faq-item {
  margin-top: 1.5rem;
}

.preempt-faq-q {
  margin-bottom: 0.5rem;
}

.preempt-faq-a {
  color: var(--wp--preset--color--ink-soft);
  margin-top: 0;
  max-width: 62ch;
}

/* 13. Footer -------------------------------------------------------------- */

.preempt-site-footer {
  border-top: 1px solid rgba(247, 244, 239, 0.12);
}

.preempt-site-footer h2,
.preempt-site-footer h3 {
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.preempt-footer-legal {
  border-top: 1px solid rgba(247, 244, 239, 0.12);
  font-size: 0.85rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
}

.preempt-footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.preempt-footer-nav li {
  margin-bottom: 0.4rem;
}

/* 14. Utilities ----------------------------------------------------------- */

.wp-block-navigation .wp-block-navigation-item__content {
  font-weight: 600;
}

.wp-block-button.is-style-outline-accent .wp-block-button__link {
  background: transparent;
  border: 2px solid var(--wp--preset--color--accent-strong);
  color: var(--wp--preset--color--accent-text);
}

.wp-block-button.is-style-outline-accent .wp-block-button__link:hover,
.wp-block-button.is-style-outline-accent .wp-block-button__link:focus {
  background: var(--wp--preset--color--accent-strong);
  color: var(--wp--preset--color--paper);
}

.preempt-dark-band .wp-block-button.is-style-outline-accent .wp-block-button__link {
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent);
}

/* Walkthrough form -------------------------------------------------------- */

.preempt-form-shell {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 8px;
  padding: clamp(1.25rem, 2.4vw, 2rem);
}

.preempt-walkthrough-form {
  display: grid;
  gap: 1rem;
}

.preempt-walkthrough-form .preempt-form-field {
  margin: 0;
}

.preempt-walkthrough-form label {
  color: var(--wp--preset--color--ink);
  display: block;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.preempt-walkthrough-form input,
.preempt-walkthrough-form select,
.preempt-walkthrough-form textarea {
  background: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 6px;
  color: var(--wp--preset--color--ink);
  font: inherit;
  min-height: 2.35rem;
  padding: 0.5rem 0.7rem;
  width: 100%;
}

.preempt-walkthrough-form textarea {
  min-height: 5.8rem;
  resize: vertical;
}

.preempt-walkthrough-form :is(input, select, textarea):focus {
  border-color: var(--wp--preset--color--accent-strong);
  box-shadow: 0 0 0 4px rgba(214, 88, 39, 0.14);
  outline: none;
}

.preempt-form-note {
  color: var(--wp--preset--color--ink-soft);
  font-size: var(--wp--preset--font-size--xs);
  margin: 0;
}

.preempt-turnstile {
  margin: 0;
}

.preempt-form-actions {
  margin: 0;
}

.preempt-form-actions button {
  background: var(--wp--preset--color--accent);
  border: 0;
  border-radius: 4px;
  color: var(--wp--preset--color--ink);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 0.65rem 1rem;
}

.preempt-form-actions button:hover,
.preempt-form-actions button:focus {
  background: var(--wp--preset--color--accent-strong);
  color: var(--wp--preset--color--paper);
}

.preempt-form-message {
  border-radius: 6px;
  margin-bottom: 1rem;
  padding: 0.8rem 1rem;
}

.preempt-form-message p {
  margin-top: 0;
}

.preempt-form-success {
  background: #edf7ef;
  color: #163f21;
}

.preempt-form-error {
  background: #fff1ea;
  color: #6f2410;
}

.preempt-hidden-field {
  display: none;
}

/* Cookie consent --------------------------------------------------------- */

.preempt-cookie-banner {
  align-items: center;
  background: var(--wp--preset--color--ink);
  border: 1px solid rgba(247, 244, 239, 0.16);
  border-radius: 8px;
  bottom: 1rem;
  box-shadow: 0 16px 42px rgba(21, 28, 32, 0.24);
  color: var(--wp--preset--color--paper);
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) auto;
  left: 1rem;
  margin: 0 auto;
  max-width: min(58rem, calc(100vw - 2rem));
  padding: 1rem;
  position: fixed;
  right: 1rem;
  z-index: 1000;
}

.preempt-cookie-banner[hidden] {
  display: none;
}

.preempt-cookie-copy {
  display: grid;
  gap: 0.25rem;
}

.preempt-cookie-copy strong {
  font-size: var(--wp--preset--font-size--xs);
}

.preempt-cookie-copy p {
  color: rgba(247, 244, 239, 0.78);
  font-size: var(--wp--preset--font-size--xs);
  margin: 0;
}

.preempt-cookie-copy a {
  color: var(--wp--preset--color--accent);
}

.preempt-cookie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: flex-end;
}

.preempt-cookie-actions button {
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700;
  min-height: 2.35rem;
  padding: 0.55rem 0.8rem;
}

.preempt-cookie-primary {
  background: var(--wp--preset--color--accent);
  border: 1px solid var(--wp--preset--color--accent);
  color: var(--wp--preset--color--ink);
}

.preempt-cookie-secondary {
  background: transparent;
  border: 1px solid rgba(247, 244, 239, 0.38);
  color: var(--wp--preset--color--paper);
}

.preempt-cookie-primary:hover,
.preempt-cookie-primary:focus {
  background: var(--wp--preset--color--accent-strong);
  border-color: var(--wp--preset--color--accent-strong);
  color: var(--wp--preset--color--paper);
}

.preempt-cookie-secondary:hover,
.preempt-cookie-secondary:focus {
  border-color: var(--wp--preset--color--paper);
}

/* 15. Reduced motion and print -------------------------------------------- */

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

@media (max-width: 781px) {
  .preempt-display {
    max-width: none;
  }

  .preempt-site-header {
    position: static;
  }

  .preempt-cookie-banner {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .preempt-cookie-actions {
    justify-content: stretch;
  }

  .preempt-cookie-actions button {
    flex: 1 1 10rem;
  }
}

@media print {
  .preempt-site-header,
  .preempt-site-footer,
  .preempt-arc-rule {
    display: none;
  }

.preempt-dark-band {
    background: none;
    color: #000;
  }
}