/*
Theme Name: Off Market Tools
Description: Lightweight, plugin-free custom theme for Off Market Tools (offmarkettools.com), the US real-estate-investor software review site. Hand-built SEO (schema, canonical, sitemap), affiliate /go/ cloaking, no third-party plugins. English/LTR. Design v1, locked 29 Sept 2026.
Author: Off Market Tools
Version: 1.0.0
Text Domain: reibase
*/

/* =====================================================================
   BRAND TOKENS — Palette 3 "Signal" (chosen 21 Sept 2026).
   teal / deep navy / indigo / gold. Every pair below is AA-verified.
   Swapping the brand = editing this block only.
   ===================================================================== */
:root{
  /* colour */
  --ink:#023E55;
  --ink-2:#123F5C;
  --muted:#5A7380;
  --paper:#FFFFFF;
  --paper-2:#F7FBFB;          /* was #EFF7F8. Now within 8 of white. */
  --paper-3:#EDF5F6;
  --rule:#DCE8EA;
  --brand:#0F6C77;            /* buttons, links. Measured: 6.12:1 white-on-brand, 5.25:1 on
                                 brand-50. The 4.75 figure that used to sit here was wrong. */
  --brand-700:#0E5B64;
  --brand-800:#0B5059;        /* teal dark enough for small text on the mesh.
                                 --brand is 3.58:1 at the mesh's darkest point,
                                 which fails AA for the eyebrow at 13px. */
  --brand-300:#2BA5B2;
  --brand-50:#DFF1F3;
  --highlight:#F7AF02;        /* gold: flags, one CTA. Ration it. */
  --highlight-50:#FFF1CC;
  --highlight-ink:#6B4B00;
  --on-brand:#FFFFFF;
  --good:#0F6C77;
  --bad:#A8342B;

  /* dark band — the page's ONE hard break */
  --dark:#023E55;
  --dark-2:rgba(1,26,36,.6);  /* deep teal glass over the band (was indigo #3B4E73 in v0) */
  --dark-rule:#4A5D84;
  --dark-ink:#EAF6F8;
  --dark-muted:#B8D4DE;
  --dark-muted-2:#E2EEF2;     /* for muted text that lands on the LIGHT end of a
                                 dark gradient, where --dark-muted drops to 3.5:1 */

  /* hero surface (overridden per treatment in palettes.css) */
  --wash-hero:linear-gradient(160deg,#023E55 0%,#0B5069 45%,#147C88 100%);
  --panel-bg:rgba(255,255,255,.09);
  --panel-ring:rgba(255,255,255,.28) 0 0 0 1px inset;

  /* underlay: a soft MESH, not a linear fade. Overlapping radial blobs in palette
     colours, so the colour is genuinely visible but every transition is organic and
     bandless. Teal sits top-left, gold bottom-right, navy weights the lower-left,
     with a white bloom top-right keeping the middle open. Grain is added by
     .underlay::after so it never reads as flat digital gradient. */
  --mesh-base:#EDF2F2;
  --mesh:
    radial-gradient(78% 62% at 6% 2%,   rgba( 20,124,136,.34) 0%, rgba( 20,124,136,0) 62%),
    radial-gradient(62% 52% at 96% 90%, rgba(247,175,  2,.22) 0%, rgba(247,175,  2,0) 60%),
    radial-gradient(58% 48% at 88% 6%,  rgba(255,255,255,.90) 0%, rgba(255,255,255,0) 58%),
    radial-gradient(70% 58% at 16% 98%, rgba( 59, 78,115,.13) 0%, rgba( 59, 78,115,0) 62%),
    radial-gradient(52% 44% at 52% 46%, rgba(255,255,255,.62) 0%, rgba(255,255,255,0) 66%);

  /* type: body on the system stack; headings use --font-head (FONTS v1, below) */
  --font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* spacing — 4px base, 8 dominant */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:48px; --s9:64px; --s10:96px;

  /* shape */
  --r-btn:8px; --r-card:16px; --r-lg:24px; --r-pill:9999px;

  /* elevation — soft + wide; borders are inset shadows, never `border` */
  /* Elevation is tuned for a COLOURED ground: a shadow that reads on white
     disappears on a mesh, so these are deeper and tinted with the ink hue. */
  --sh-sm:rgba(2,45,62,.07) 0 1px 3px, rgba(2,45,62,.06) 0 3px 10px -2px;
  --sh-md:rgba(2,45,62,.08) 0 2px 6px, rgba(2,45,62,.10) 0 10px 26px -6px;
  --sh-lg:rgba(2,45,62,.10) 0 4px 12px, rgba(2,45,62,.14) 0 22px 48px -14px;
  --ring:rgba(2,62,85,.14) 0 0 0 1px inset;

  /* layout */
  --w-page:1200px;
  --w-text:720px;             /* ~68ch measure for long-form */

  /* motion */
  --t:.3s cubic-bezier(.645,.045,.355,1);
  --t-fast:.18s ease-in-out;
}

/* =====================================================================
   BASE
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,video,svg{max-width:100%;height:auto;display:block}
/* --brand-800, not --brand. A link in body prose sits directly on the mesh, and
   --brand measures 4.14:1 against the mesh's darker end, which fails AA. On white
   the two are near indistinguishable, so the darker one is correct everywhere and
   there is no need for a second rule. */
a{color:var(--brand-800);text-decoration:none;transition:color var(--t-fast)}
a:hover{color:var(--brand-700);text-decoration:underline}
/* Links inside running text are underlined: --brand-800 against --ink body text is too close
   to tell apart by colour alone (WCAG 1.4.1). Buttons and card links keep their own styles. */
.article p a:not(.btn),.article li a:not(.btn),.faq details p a{text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px;font-weight:500}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:2px}
hr{border:0;height:1px;background:var(--rule);margin:var(--s8) 0}

h1,h2,h3,h4{margin:0 0 var(--s4);color:var(--ink);text-wrap:balance}
h1{font-size:clamp(2rem,1.3rem + 2.8vw,3.25rem); font-weight:600; line-height:1.1; letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.25rem); font-weight:600; line-height:1.2; letter-spacing:-.015em}
h3{font-size:clamp(1.15rem,1rem + .6vw,1.4rem); font-weight:600; line-height:1.35}
h4{font-size:1.05rem;font-weight:600;line-height:1.4}
p{margin:0 0 var(--s5)}
strong{font-weight:600}
small,.small{font-size:.875rem}

.wrap{max-width:var(--w-page);margin-inline:auto;padding-inline:var(--s5)}
.text{max-width:var(--w-text)}
.stack>*+*{margin-top:var(--s5)}
.muted{color:var(--muted)}
.center{text-align:center}

/* =====================================================================
   EYEBROW  — labels a section without spending a heading level
   ===================================================================== */
.eyebrow{
  display:block;font-size:.8125rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brand-800);margin-bottom:var(--s3)
}

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn{
  display:inline-flex;align-items:center;gap:var(--s2);
  padding:11px 20px;border-radius:var(--r-btn);border:0;cursor:pointer;
  font-family:inherit;font-size:1rem;font-weight:600;line-height:1.2;
  background:var(--brand);color:var(--on-brand);
  box-shadow:rgba(0,0,0,.10) 0 -2px 0 0 inset;   /* bottom bevel */
  transition:background var(--t-fast),transform var(--t-fast);
}
.btn:hover{background:var(--brand-700);color:var(--on-brand);text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--lg{padding:15px 28px;font-size:1.0625rem}

.btn--ghost{
  background:transparent;color:var(--ink);
  box-shadow:var(--ring);                         /* the "border" */
}
.btn--ghost:hover{background:var(--paper-2);color:var(--ink);transform:translateY(-1px)}

/* =====================================================================
   PILLS / BADGES
   ===================================================================== */
.pill{
  display:inline-flex;align-items:center;gap:var(--s2);
  padding:5px 12px;border-radius:var(--r-pill);
  background:var(--brand-50);color:var(--brand-700);
  font-size:.875rem;font-weight:500;line-height:1.4
}

/* =====================================================================
   CARDS
   ===================================================================== */
.card{
  background:var(--paper);border-radius:var(--r-card);
  padding:var(--s6);box-shadow:var(--sh-md)
}

.grid{display:grid;gap:var(--s6)}
@media(min-width:720px){
  .grid--3{grid-template-columns:repeat(3,1fr)}
}

/* =====================================================================
   VERDICT BOX — top-of-page answer for skimmers
   ===================================================================== */
.verdict{
  background:var(--paper-2);border-radius:var(--r-card);
  padding:var(--s6);box-shadow:var(--ring);margin-bottom:var(--s7)
}

/* =====================================================================
   PROS / CONS — must not read as decorative. "What it's bad at" is mandatory.
   ===================================================================== */
.pc{display:grid;gap:var(--s5);margin:var(--s7) 0}
@media(min-width:720px){.pc{grid-template-columns:1fr 1fr}}

/* =====================================================================
   COMPARISON TABLE — scannable in 5s, collapses on mobile
   ===================================================================== */
.cmp{width:100%;border-collapse:collapse;margin:var(--s7) 0;font-size:.9375rem}
.cmp th,.cmp td{padding:var(--s4);text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
.cmp thead th{
  position:sticky;top:0;z-index:1;
  background:var(--paper-2);font-weight:600;font-size:.8125rem;
  text-transform:uppercase;letter-spacing:.05em;color:var(--muted)
}
.cmp tbody tr:hover{background:var(--paper-2)}
.cmp .yes{color:var(--good);font-weight:600}
.cmp .no{color:var(--muted)}
.cmp .addon{color:var(--highlight-ink);font-weight:600}
.cmp tbody tr:first-child{background:var(--brand-50)}
.cmp__tool{font-weight:600;display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
/* On the mesh a bare table vanishes. The scroll wrapper carries the surface:
   own fill, ring and shadow, with the radius clipping the header/row fills. */
.cmp__scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:var(--paper);border-radius:var(--r-card);
  box-shadow:var(--ring),var(--sh-md);
  margin:var(--s7) 0;
}
.cmp__scroll > .cmp{margin:0}

/* =====================================================================
   SURFACE LEVELS on a coloured ground.
   Nothing may float. But making every block solid white would bury the
   mesh, so there are two levels:
     .surface       solid white  — dense data (table, tool cards, panel)
     .surface-soft  translucent  — lists and prose (guides, FAQ), so the
                    mesh still tints through while the block reads as an object
   ===================================================================== */
.surface-soft{
  background:rgba(255,255,255,.58);
  border-radius:var(--r-card);
  box-shadow:var(--ring),var(--sh-sm);
  padding:var(--s6) var(--s7);
}
@media(max-width:719px){.surface-soft{padding:var(--s5)}}
.surface-soft .guide:last-child,.surface-soft details:last-child{border-bottom:0}
@media(max-width:719px){
  .cmp thead{display:none}
  .cmp tr{display:block;margin-bottom:var(--s5);border-radius:var(--r-card);box-shadow:var(--ring);padding:var(--s3)}
  .cmp td{display:flex;justify-content:space-between;gap:var(--s4);border:0;padding:var(--s3)}
  .cmp td::before{content:attr(data-label);font-weight:600;color:var(--muted);flex:0 0 42%}
  .cmp__tool{justify-content:flex-end;text-align:right}
  .cmp .flag{font-size:.6875rem;padding:2px 8px}
}

/* =====================================================================
   DISCLOSURE + METHODOLOGY — structural, not afterthoughts
   ===================================================================== */
.disclosure{
  font-size:.875rem;color:var(--muted);line-height:1.55;
  padding:var(--s4);border-radius:var(--r-btn);background:var(--paper-2);margin:var(--s6) 0
}
.method{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);
  padding:var(--s4) var(--s5);border-radius:var(--r-card);
  background:var(--paper-2);box-shadow:var(--ring);margin:var(--s7) 0;font-size:.9375rem
}
.method strong{display:block}
.stamp{font-size:.875rem;color:var(--muted)}

/* =====================================================================
   FAQ — two column, question left, + right, 1px rule. No cards.
   ===================================================================== */
.faq{margin:var(--s8) 0}
.faq__grid{display:grid;gap:var(--s3) var(--s6)}
@media(min-width:860px){.faq__grid{grid-template-columns:1fr 1fr;align-items:start}}
/* each column is its own stack: opening an item pushes only what is below it
   in that column, instead of stretching a shared grid row */
.faq__col > details:last-child{border-bottom:0}
/* Each question is its own bounded row. The summary used to stretch the full
   column, pushing the + marker far from its own question so it read as
   belonging to the next one. */
.faq details{border-bottom:0;background:var(--paper);border-radius:var(--r-card);
  box-shadow:var(--ring);transition:box-shadow var(--t-fast)}
.faq details:hover,.faq details[open]{box-shadow:var(--ring),var(--sh-md)}
.faq summary{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s4);
  padding:var(--s4) var(--s5);cursor:pointer;list-style:none;
  font-size:1rem;font-weight:500;color:var(--ink);line-height:1.4
}
.faq summary::-webkit-details-marker{display:none}
/* the +/- marker lives in PLUS / MINUS below */
.faq details>div{padding:0 var(--s5) var(--s5);color:var(--ink-2);line-height:1.6}
.faq details>div>*:last-child{margin-bottom:0}

/* =====================================================================
   HEADER / NAV
   ===================================================================== */
.site-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--rule)}
.site-head__in{display:flex;align-items:center;gap:var(--s6);min-height:64px}
.brand{display:inline-flex;align-items:center;gap:var(--s2);font-weight:700;font-size:1.0625rem;color:var(--ink);letter-spacing:-.01em}
.brand:hover{text-decoration:none;color:var(--ink)}
.brand svg{color:var(--brand);flex:0 0 auto}
/* the brand lockup (design/brand/final/): 28px tall in the bar, a little smaller on narrow phones */
.brand__lockup{display:block;width:auto;height:28px}
@media(max-width:419px){.site-head .brand__lockup{height:23px}.site-head__in{gap:var(--s3)}}   /* the wider brand fits 360 and 375 with the CTA */
/* `.nav a` and `.head--dark .nav a` removed 23 Sept. At (0,1,1) and (0,2,1) they beat
   `.nav__link` (0,1,0) and, worse, painted the MEGA PANEL links white on a white
   panel under a dark header. The mega nav styles at the end of this file replace them. */
.nav{display:none;margin-left:auto;gap:var(--s2)}
@media(min-width:900px){.nav{display:flex;align-items:stretch;align-self:stretch}
  /* Items run the full height of the bar so the cursor never leaves a hovered
     item on its way down to the panel. The link keeps its pill shape by being
     centred inside the item rather than stretched. */
  .nav__item{display:flex;align-items:center}
  .nav > .nav__link{align-self:center}}
.head-cta{margin-left:auto}
@media(min-width:900px){.head-cta{margin-left:var(--s3)}}
/* Below ~420px the brand and the CTA each wrapped to two lines and the header
   grew a second row of text. Neither label may wrap, and the CTA gives up some
   padding instead. */
.brand,.head-cta{white-space:nowrap;flex-shrink:0}
@media(max-width:419px){.head-cta{padding:10px 14px;font-size:.9375rem}}
@media(max-width:359px){.head-cta{display:none}}   /* the menu carries Compare */

/* skip link — visible only on focus */
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:var(--s5);top:var(--s3);width:auto;height:auto;z-index:100;padding:10px 16px;
  background:var(--ink);color:#fff;border-radius:var(--r-btn)}

/* mobile nav — <details> disclosure, zero JS */
.mnav{position:relative;margin-left:var(--s3)}
@media(min-width:900px){.mnav{display:none}}
.mnav>summary{
  list-style:none;cursor:pointer;display:grid;place-items:center;
  width:42px;height:42px;border-radius:var(--r-btn);box-shadow:var(--ring);
  transition:background var(--t-fast)
}
.mnav>summary::-webkit-details-marker{display:none}
.mnav>summary:hover{background:var(--paper-2)}
.mnav__bars{display:grid;gap:4px;width:18px}
.mnav__bars i{display:block;height:2px;background:var(--ink);border-radius:2px}
.mnav[open]>summary{background:var(--paper-2)}
.mnav__panel{
  position:absolute;right:0;top:calc(100% + 10px);z-index:60;
  display:flex;flex-direction:column;min-width:220px;padding:var(--s2);
  background:var(--paper);border-radius:var(--r-card);box-shadow:var(--sh-lg),var(--ring)
}
.mnav__panel a{padding:11px 14px;border-radius:var(--r-btn);color:var(--ink);font-weight:500}
.mnav__panel a:hover{background:var(--paper-2);text-decoration:none}

/* =====================================================================
   DARK SURFACES — live styles for palette 3 (nav bar, dark hero, gold CTA).
   Moved here from palettes.css so the site renders correctly with no query
   parameter. palettes.css now only holds the A/B/C hero previews.
   ===================================================================== */
/* dark navigation bar */
.head--dark{background:var(--dark);box-shadow:none}
.head--dark .brand,.head--dark .brand:hover{color:#fff}
.head--dark .mnav>summary{box-shadow:rgba(255,255,255,.28) 0 0 0 1px inset}
.head--dark .mnav__bars i{background:#fff}

/* bold dark hero — layout 3 */
/* v0's .hero--dark homepage hero lives in design/approved/v0/; v1 heroes are in assets/css/v1-home.css */
.btn--gold{background:var(--highlight);color:#3A2A00;box-shadow:rgba(0,0,0,.16) 0 -2px 0 0 inset}
.btn--gold:hover{background:#E0A002;color:#3A2A00}

/* =====================================================================
   UNDERLAY — one gradient behind several sections. The sections inside are
   transparent, so the colour drifts across their boundaries and the seams
   disappear. Boundaries are either invisible (here) or total (.section--dark).
   Never half-faded.
   ===================================================================== */
.underlay{position:relative;background-color:var(--mesh-base);background-image:var(--mesh)}
/* grain: stops the mesh reading as a flat digital gradient. Pure CSS, no request. */
.underlay::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.30;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
.underlay > *{position:relative;z-index:1}
.underlay > .section--dark{z-index:2}
/* The mesh is a COLOURED ground, so text sitting directly on it must be darker than
   it is on white. --muted (#5A7380) measures 3.76:1 on the teal peak (#adcfd3);
   #33525C gives 5.2:1 there and still reads as secondary on the lighter areas. */
.underlay{--muted:#33525C}
.underlay > .section:not(.section--dark){background:transparent}
.underlay > .section + .section{padding-top:0}
/* ...but a section with its OWN surface is not sharing the ground, so it keeps its
   padding. Same for whatever follows it, since that starts the ground again. */
.underlay > .section + .section--dark{padding-top:var(--s9)}   /* (0,3,0) to beat the sibling reset above */
.underlay > .section--dark + .section{padding-top:var(--s9)}
/* the last block in a section must not add its own bottom margin on top of the
   section padding, or the top and bottom gaps stop matching */
.section > .wrap > *:last-child,
.section > .wrap > *:last-child > *:last-child{margin-bottom:0}

/* =====================================================================
   HOMEPAGE
   ===================================================================== */
.hero{padding:var(--s9) 0 var(--s8);background:var(--wash-hero)}
/* A grid item's min-width defaults to auto, which means min-content, which means
   the item refuses to shrink. The price table's min-content is 313px, so at 360px
   it pushed the whole hero column 21px past the viewport and gave the page a
   sideways scroll. min-width:0 lets the column obey the viewport instead. */
.hero h1{margin-bottom:var(--s5)}
.hero__lede{font-size:1.125rem;color:var(--muted);max-width:52ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}

/* proof strip — methodology proof, directly under the CTA */
.proof{display:flex;flex-wrap:wrap;gap:var(--s6);margin-top:var(--s7);padding-top:var(--s6);box-shadow:0 1px 0 var(--rule) inset}
.proof div{font-size:.875rem;color:var(--muted);line-height:1.4}
.proof b{display:block;font-size:1.375rem;font-weight:700;color:var(--ink);letter-spacing:-.02em}

.section{padding:var(--s9) 0}
.section__head{max-width:var(--w-text);margin-bottom:var(--s8)}
.section--center .section__head{margin-inline:auto;text-align:center}

/* tool card */
.tool{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s6);border-radius:var(--r-card);background:var(--paper);box-shadow:var(--ring);transition:box-shadow var(--t),transform var(--t)}
.tool:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.tool__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.tool h3{margin:0;font-size:1.125rem}
.tool__price{font-size:.875rem;color:var(--muted);font-variant-numeric:tabular-nums}
.tool p{margin:0;font-size:.9375rem;color:var(--muted)}
.tool__link{margin-top:auto;padding-top:var(--s3);font-weight:600;font-size:.9375rem}

/* guide card */
.guide{padding:var(--s5) 0;border-bottom:1px solid var(--rule)}
.guide:last-child{border-bottom:0}
.guide h3{margin:0 0 var(--s2);font-size:1.0625rem}
.guide p{margin:0;font-size:.9375rem;color:var(--muted)}

/* =====================================================================
   DARK BAND — one per page. Breaks the white rhythm and anchors the
   independence claim visually instead of just stating it.
   ===================================================================== */
.section--dark{background:var(--dark);color:var(--dark-ink)}
.section--dark h2,.section--dark h3{color:#fff}
.section--dark .muted,.section--dark p{color:var(--dark-muted)}
.section--dark .eyebrow{color:var(--brand-300)}
.section--dark a:not(.btn){color:#6FD9E2}
.section--dark a:not(.btn):hover{color:#fff}
/* --brand-300 (#2BA5B2) measures 3.91:1 on the #023E55 band, under AA for the small
   eyebrow. #6FD9E2 gives 7.9:1. */
.section--dark .eyebrow{color:#6FD9E2}
.section--dark .btn--ghost{color:#fff;box-shadow:rgba(255,255,255,.28) 0 0 0 1px inset}
.section--dark .btn--ghost:hover{background:rgba(255,255,255,.08);color:#fff}
.section--dark .grid{counter-reset:rule}
.section--dark .rule-card{counter-increment:rule;
  background:var(--dark-2);border-radius:var(--r-card);padding:var(--s6);
  box-shadow:inset 0 0 0 1px rgba(126,227,237,.16),0 22px 44px -26px rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)
}
/* "the three rules we hold ourselves to, in public": numbered like rules */
.section--dark .rule-card::before{content:"Rule " counter(rule);display:block;margin-bottom:var(--s3);
  font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#7EE3ED}
.section--dark .rule-card h3{font-size:1.0625rem;margin-bottom:var(--s3)}
.section--dark .rule-card p{margin:0;font-size:.9375rem}

/* =====================================================================
   FLAGS — the amber finally does a job
   ===================================================================== */
.flag{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:var(--r-pill);
  background:var(--highlight-50);color:var(--highlight-ink);
  font-size:.75rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  white-space:nowrap
}

/* tool card gets a colour key so the grid is not six identical white boxes */
.tool{position:relative;overflow:hidden}
.tool::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--brand)}
.tool--free::before{background:var(--brand-300)}
.tool__meta{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;font-size:.8125rem;color:var(--muted)}
.tool__best{font-size:.875rem;color:var(--ink-2)}
.tool__best b{color:var(--ink);font-weight:600}

/* =====================================================================
   ARTICLE / LONG-FORM  — 1.65 line height, 720px measure
   ===================================================================== */
.article{max-width:var(--w-text)}
.article h2{margin-top:var(--s8)}
.article h3{margin-top:var(--s7)}
.article ul,.article ol{margin:0 0 var(--s5);padding-left:1.35em}
.article li{margin-bottom:var(--s3)}
.article blockquote{margin:var(--s6) 0;padding:var(--s5);background:var(--paper-2);border-radius:var(--r-card);box-shadow:inset 3px 0 0 var(--brand)}
.article blockquote p:last-child{margin-bottom:0}
.article figure{margin:var(--s7) 0}
.article figcaption{font-size:.875rem;color:var(--muted);margin-top:var(--s3)}
.article code{background:var(--paper-2);padding:2px 6px;border-radius:4px;font-size:.9em}

.crumbs{font-size:.875rem;color:var(--muted);margin-bottom:var(--s5)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--ink)}

/* =====================================================================
   FOOTER: v1 in assets/css/v1-foot.css (inlined on every page until the lock). The v0 rules
   that were here are archived in design/approved/footer-v0.css.
   =====================================================================
*/

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

/* =====================================================================
   AMBIENT PLAT GEOMETRY
   Abstract parcel / lot-boundary line-work, not property clipart. Reads as
   land records without becoming an icon. Very low opacity, decorative only,
   never inside the reading measure.
   ===================================================================== */
.plat{
  position:absolute;pointer-events:none;z-index:0;
  color:var(--brand);opacity:.07;
}
/* The plat deliberately bleeds past the section edge, so the section must clip it
   or it widens the page. `clip` rather than `hidden`: it does not create a scroll
   container, so it cannot break position:sticky inside. */
.section{position:relative;overflow-x:clip}
.section--dark .plat{color:#7FD9E2;opacity:.10}
.plat--tr{top:var(--s8);right:calc(var(--s8) * -1);width:min(38vw,460px)}
.plat--bl{bottom:var(--s8);left:calc(var(--s8) * -1);width:min(30vw,360px)}
@media(max-width:900px){.plat{display:none}}   /* no room, and it would crowd the text */

/* =====================================================================
   STRETCHED LINK — the whole card is clickable, but there is still only
   ONE link in the accessibility tree. Wrapping the card in an <a> would
   make screen readers announce the entire card as link text and nest the
   existing link inside it.
   ===================================================================== */
.tool{transition:transform var(--t),box-shadow var(--t)}
/* the whole card is the link, and only the card: outside a .tool this overlay used to stretch over the
   whole section (the homepage's "All guides" link covered every card in it) */
.tool .tool__link::after{content:"";position:absolute;inset:0;z-index:1}
.tool:hover,.tool:focus-within{transform:translateY(-3px);box-shadow:var(--ring),var(--sh-lg)}
.tool:hover .tool__link,.tool:focus-within .tool__link{color:var(--brand-700)}
/* a stand-alone "All …" link: looks like the card links, is only itself */
.more-link{font-weight:600;font-size:.9375rem}
.more-link:hover .arw{transform:translateX(4px)}

/* =====================================================================
   ARROW — drawn, not a text glyph, so it can move on hover
   ===================================================================== */
.arw{
  display:inline-block;width:1em;height:1em;vertical-align:-.12em;margin-left:.35em;
  background:currentColor;
  -webkit-mask:var(--arw) center/contain no-repeat;mask:var(--arw) center/contain no-repeat;
  transition:transform var(--t);
}
:root{--arw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E")}
a:hover .arw,.btn:hover .arw{transform:translateX(4px)}
.tool:hover .arw{transform:translateX(4px)}

/* =====================================================================
   PLUS / MINUS — one element, two gradient bars. Opening collapses the
   vertical bar to nothing while the whole mark rotates, so + morphs into -
   instead of being swapped for a different glyph.
   ===================================================================== */
.faq summary::after{
  content:"";flex:0 0 30px;width:30px;height:30px;border-radius:50%;
  box-shadow:var(--ring);
  background:
    linear-gradient(currentColor,currentColor) center/11px 1.6px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.6px 11px no-repeat;
  color:var(--muted);
  transition:transform .32s cubic-bezier(.645,.045,.355,1),
             background-size .32s cubic-bezier(.645,.045,.355,1),
             box-shadow var(--t-fast),color var(--t-fast);
}
.faq summary:hover::after{color:var(--brand);box-shadow:rgba(15,108,119,.35) 0 0 0 1px inset}
.faq details[open] summary::after{
  transform:rotate(180deg);
  background-size:11px 1.6px, 0 11px;      /* vertical bar collapses -> minus */
  color:var(--brand);
}
.faq details > div{
  overflow:hidden;
  animation:faqOpen .32s cubic-bezier(.645,.045,.355,1);
}
@keyframes faqOpen{from{opacity:0}to{opacity:1}}

@media(prefers-reduced-motion:reduce){.faq details > div{animation:none}}

/* =====================================================================
   MEGA NAV  (desktop) + nested disclosures (mobile)
   CSS-only. Opens on :hover AND :focus-within so it is keyboard reachable
   with no JavaScript. The panel is deliberately NOT visibility:hidden,
   because that would strip its links from the tab order and :focus-within
   could then never fire. opacity + pointer-events keeps them focusable.
   Structure comes from rei_menu(); this file only styles it.
   ===================================================================== */
.site-head__in{position:relative}

/* `.nav__item` runs the full height of the bar, so a panel at top:100% starts
   flush with the item's bottom edge. That is what kills the dead gap below. */
.nav__item{position:relative}
/* Wide panels skip the item and resolve to `.site-head__in`. `.nav` is NOT a
   containing block here on purpose: it carries margin-left:auto, so it sits well
   right of the viewport centre, and a panel centred on it ran 33px off-screen at
   1024px. `.site-head__in` is the full content row and is centred, so a panel
   pinned to its edges cannot overflow at any width. */
.nav__item--c2,.nav__item--c3{position:static}

.nav__link{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:var(--r-btn);
  color:var(--ink-2);font-size:.9375rem;font-weight:500;
  transition:background var(--t-fast),color var(--t-fast)}
.nav__link:hover{background:var(--paper-2);color:var(--ink);text-decoration:none}

.nav__caret{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  border-radius:1px;opacity:.5;transform:translateY(-2px) rotate(45deg);
  transition:transform var(--t-fast),opacity var(--t-fast)}
.nav__item:hover .nav__caret,
.nav__item:focus-within .nav__caret{opacity:.9;transform:translateY(1px) rotate(225deg)}

/* top:100% (NOT +10px) so the panel's hit area begins flush with the trigger.
   The visual gap is padding on the wrapper instead, which keeps the hover region
   continuous: cursor leaves the link and is immediately inside the panel box.
   With a real gap the pointer crosses dead space, :hover drops, the panel gets
   pointer-events:none on its way out and can never catch the cursor again. */
.nav__panel{
  position:absolute;top:100%;z-index:60;padding-top:10px;
  opacity:0;pointer-events:none;
  transition:opacity var(--t-fast)
}
.nav__item--c1 .nav__panel{left:0;width:310px}
.nav__item--c2 .nav__panel{right:0;left:auto;width:600px}
.nav__item--c3 .nav__panel{left:0;right:0;width:auto}

.nav__item:hover > .nav__panel,
.nav__item:focus-within > .nav__panel{opacity:1;pointer-events:auto}

.nav__blurb{margin:0 0 var(--s5);color:var(--muted);font-size:.875rem;line-height:1.45}

.nav__cols{display:grid;gap:var(--s5) var(--s6)}
.nav__item--c2 .nav__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
.nav__item--c3 .nav__cols{grid-template-columns:repeat(3,minmax(0,1fr))}

.nav__gtitle{margin:0 0 var(--s2);color:var(--brand);
  font-size:.6875rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.nav__group ul{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.nav__group a{display:block;padding:7px 9px;border-radius:var(--r-btn);
  color:var(--ink);font-size:.9063rem;line-height:1.35;transition:background var(--t-fast)}
.nav__group a:hover{background:var(--paper-2);text-decoration:none}
.nav__name{font-weight:500}
/* Unwritten entry: same box as a link, plain muted text, no hover, not clickable. */
.nav__na{display:block;padding:7px 9px;color:var(--muted);font-size:.9063rem;line-height:1.35;cursor:default}
/* Section trigger with no hub page yet: looks like the other triggers, links nowhere. */
.nav__link--nohub{cursor:default}

/* "planned" = page not written yet. Gold chip, 11:1 on the pale gold ground. */
.nav__soon{font-style:normal;margin-left:7px;padding:1px 7px;border-radius:999px;
  background:var(--highlight-50);color:var(--highlight-ink);
  font-size:.625rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}

.nav__all{display:flex;align-items:center;gap:9px;margin-top:var(--s5);padding-top:var(--s4);
  border-top:1px solid var(--rule);color:var(--brand);font-weight:600;font-size:.875rem}
.nav__all:hover{text-decoration:none}
.nav__all:hover .arw{transform:translateX(3px)}

/* Dark header: only the trigger inverts. The panel stays a light surface. */
.head--dark .nav__link{color:rgba(255,255,255,.78)}
.head--dark .nav__link:hover{background:rgba(255,255,255,.1);color:#fff}

/* ---- mobile: nested <details> ---- */
.mnav__top,.mnav__sec > summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:11px 14px;border-radius:var(--r-btn);
  color:var(--ink);font-weight:500;font-size:.9375rem;cursor:pointer;list-style:none}
.mnav__sec > summary::-webkit-details-marker{display:none}
.mnav__sec > summary:hover{background:var(--paper-2)}
.mnav__sec[open] > summary{background:var(--paper-2);color:var(--ink)}
.mnav__sec[open] > summary .nav__caret{transform:translateY(1px) rotate(225deg)}
/* Chrome hides closed <details> via ::details-content, which an author `display`
   cannot override, so this renders correctly there. Firefox and Safari use
   `details:not([open]) > *:not(summary){display:none}` in their UA sheet, which
   `.mnav__sub{display:grid}` WOULD outrank - every section would render expanded.
   These two rules state the intent explicitly so it holds in all three. */
.mnav:not([open]) > .mnav__panel{display:none}
.mnav__sec:not([open]) > .mnav__sub{display:none}
.mnav__sub{padding:var(--s2) 0 var(--s4) var(--s4);display:grid;gap:1px}
.mnav__sub .nav__gtitle{margin:var(--s3) 0 var(--s1)}
.mnav__sub a{display:block;padding:8px 10px;border-radius:var(--r-btn);
  color:var(--ink-2);font-size:.875rem;line-height:1.35}
.mnav__sub a:hover{background:var(--paper-2);color:var(--ink);text-decoration:none}
.mnav__na{display:block;padding:8px 10px;color:var(--muted);font-size:.875rem;line-height:1.35}
.mnav__all{color:var(--brand);font-weight:600;margin-top:var(--s2)}

/* The mobile panel can outrun the viewport with 30+ links in it. */
.mnav__panel{max-height:calc(100vh - 96px);overflow-y:auto;overscroll-behavior:contain}

@media(prefers-reduced-motion:reduce){
  .nav__panel,.nav__caret,.nav__all .arw{transition:none}
}

/* =====================================================================
   REVIEW LAYOUT - /reviews/{tool}/
   These components exist because our evidence is unusual: ratings across
   four platforms INCLUDING the empty ones, per-unit costs on top of the
   headline price, and complaints counted rather than paraphrased.
   ===================================================================== */

.crumbs--dark,.crumbs--dark a{color:rgba(255,255,255,.62)}
.crumbs--dark a:hover{color:#fff}
/* Sits directly on the gradient with nothing behind it. At the light end
   (#147C88) even #E8F4F7 only reaches 4.10:1, so this one must be white. */
.rv__stamp{margin:var(--s4) 0 0;color:#fff;font-size:.9375rem}

.rv__cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.rv__disc{margin:var(--s4) 0 0;color:#CFE4EB;font-size:.8125rem;line-height:1.5}

/* Evidence strip - the empty platforms are the point, so they get a slot. */
.ev{display:grid;gap:var(--s4);margin-top:var(--s2)}
@media(min-width:620px){.ev{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:960px){.ev{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ev__src{margin:0;color:var(--muted);font-size:.75rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase}
.ev__score{margin:var(--s2) 0 0;font-size:2.25rem;font-weight:700;line-height:1;
  letter-spacing:-.02em;color:var(--ink)}
.ev__score span{font-size:.9375rem;font-weight:500;color:var(--muted);letter-spacing:0}
.ev__note{margin:2px 0 0;font-size:.8125rem;color:var(--muted);line-height:1.4}
.ev__lede{margin:var(--s6) 0 0;max-width:68ch;color:var(--ink-2)}

/* What it does: prose beside a spec table */
.rv__cols{display:grid;gap:var(--s6)}
@media(min-width:900px){.rv__cols{grid-template-columns:1.1fr 1fr;gap:var(--s8);align-items:start}}
.spec{width:100%;border-collapse:collapse;background:var(--paper);
  border-radius:var(--r-card);box-shadow:var(--ring),var(--sh-md);overflow:hidden}
.spec th,.spec td{padding:var(--s4) var(--s5);text-align:left;font-size:.9375rem;
  border-bottom:1px solid var(--rule)}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}
.spec th{color:var(--muted);font-weight:500;width:46%}
.spec td{color:var(--ink);font-weight:600}

/* Real cost: two tables, then the worked example */
.cost{display:grid;gap:var(--s6)}
@media(min-width:960px){.cost{grid-template-columns:1fr 1fr;gap:var(--s7);align-items:start}}
.cost__worked{margin:var(--s6) 0 0;padding:var(--s5);border-radius:var(--r-card);
  background:var(--paper);color:var(--ink);max-width:76ch;line-height:1.6;
  box-shadow:var(--ring),var(--sh-md);border-left:4px solid var(--highlight)}

/* What it is bad at - numbered, sourced, on the dark island */
.bad__lede{margin:0 0 var(--s6);color:var(--dark-muted);max-width:66ch}
.bad{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4);counter-reset:bad}
@media(min-width:860px){.bad{grid-template-columns:1fr 1fr;gap:var(--s4) var(--s6)}}
.bad__item{counter-increment:bad;position:relative;
  padding:var(--s5) var(--s5) var(--s5) var(--s9);
  border-radius:var(--r-card);background:rgba(255,255,255,.06);
  box-shadow:rgba(255,255,255,.16) 0 0 0 1px inset}
/* The count is the argument of this section: these are complaints we counted,
   not a selection. At .875rem it read as a footnote marker. Tabular figures so
   a two-digit tool does not shift its own headline out of line. */
.bad__item::before{content:counter(bad);position:absolute;left:var(--s5);top:calc(var(--s5) - 4px);
  color:var(--highlight);font-weight:700;font-size:1.5rem;line-height:1.25;
  font-variant-numeric:tabular-nums}
.bad__head{margin:0;color:#fff;font-weight:600;line-height:1.4}
.bad__body{margin:var(--s2) 0 0;color:var(--dark-muted);font-size:.9375rem;line-height:1.55}
.bad__src{margin:var(--s3) 0 0;color:var(--brand-300);font-size:.75rem;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase}

/* Desktop vs mobile - a short numbered argument */
.split{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4);max-width:78ch}
.split li{display:flex;gap:var(--s4);align-items:flex-start;line-height:1.6}
.split__n{flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand);color:#fff;font-size:.8125rem;font-weight:700}
.split__so{margin:var(--s6) 0 0;max-width:72ch;font-size:1.0625rem;line-height:1.6;color:var(--ink)}

/* Who should not buy */
/* Two columns from tablet up. One column left the right half of the section
   empty, which read as a layout fault rather than a reading measure. */
.nots{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
@media(min-width:900px){.nots{grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s3) var(--s6)}}
.nots li{position:relative;padding:var(--s4) var(--s5) var(--s4) var(--s8);
  background:var(--paper);border-radius:var(--r-card);box-shadow:var(--ring);line-height:1.55}
/* Was a short horizontal rule, which read as an em dash and sat off the text
   baseline. A cross is unambiguous and aligns with the first line. */
.nots li::before{content:"\00D7";position:absolute;left:var(--s5);top:var(--s4);
  color:#B4463C;font-weight:700;font-size:1.0625rem;line-height:1.55}

/* The methodology link (the method box it belonged to is v1's sources file now, rei_method_section) */
.mth__link{display:inline-flex;align-items:center;gap:8px;color:var(--brand);font-weight:600}
.mth__link:hover .arw{transform:translateX(3px)}

.grid--3{display:grid;gap:var(--s5)}
@media(min-width:760px){.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tool__name{font-size:1.0625rem;margin:0}
.tool__line{margin:var(--s3) 0 var(--s5);color:var(--ink-2);font-size:.9375rem;line-height:1.55}

/* ---------------------------------------------------------------------
   THE FINE PRINT - cancellation terms, support hours, API status.
   Long-form blocks quoting a vendor's own documents, so they need a
   reading measure and room for the quotes, not the tight card treatment
   the counted-complaint list uses.
   --------------------------------------------------------------------- */
/* auto-fit with a capped track, centred. The count varies per tool, and a fixed
   3-up left a lone card sitting in a third of the row with two thirds of empty
   space beside it, which reads as a broken layout rather than a short section. */
.fine{display:grid;gap:var(--s4);margin-top:var(--s6)}
@media(min-width:1040px){
  .fine{grid-template-columns:repeat(auto-fit,minmax(0,360px));
    justify-content:start;gap:var(--s5)}
}

/* ---------------------------------------------------------------------
   /reviews/ hub. Cards for the tools we cover, including the ones whose
   review is not written yet. Those are recessed and unlinked rather than
   hidden: linking to a page that does not exist teaches Google the site is
   broken, and hiding them claims less coverage than we have.
   --------------------------------------------------------------------- */
.hub{align-items:stretch}

/* ---------------------------------------------------------------------
   .steps - the counted-complaint list reused on a LIGHT ground.
   .bad is built for the dark plate, so on paper its white text vanishes.
   This flips only the colours and leaves the numbering and geometry alone.
   --------------------------------------------------------------------- */
.steps .bad__item{background:var(--paper);box-shadow:var(--ring),var(--sh-md)}
.steps .bad__head{color:var(--ink)}
.steps .bad__body{color:var(--ink-2)}
.steps .bad__src{color:var(--muted)}

/* =====================================================================
   COMPARISON LAYOUT - /compare/{a}-vs-{b}/
   Built from the review system's parts. What is new is the two-tool
   shape: both tools get the same card, the same button and the same rows,
   and the only colour that picks a side is the "ahead" or "lower" mark,
   which is filled only where a published fact settles it.
   ===================================================================== */

/* shared hero pieces */
.cp__btn{margin-top:var(--s4)}
.cp__revlink{display:inline-flex;align-items:center;gap:8px;margin-top:var(--s3);
  font-weight:600;font-size:.9375rem}
.cp__revlink:hover .arw{transform:translateX(3px)}
.cp__disc{margin:var(--s5) 0 0}

/* ---------- body ---------- */
.cp__intro{margin:var(--s4) 0 0;max-width:70ch;color:var(--ink-2)}
.section__head .bad__lede{margin:var(--s4) 0 0}

/* what each is built for */
.cp__built{display:grid;gap:var(--s5);margin-top:var(--s6)}
@media(min-width:860px){.cp__built{grid-template-columns:1fr 1fr}}
.cp__card{background:var(--paper);border-radius:var(--r-card);padding:var(--s6);
  box-shadow:var(--ring),var(--sh-md)}
.cp__cardtool{margin:0 0 var(--s2);color:var(--brand-800);font-size:.75rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase}
.cp__card h3{margin:0 0 var(--s4)}
.cp__points{margin:0;padding-left:1.15em}
.cp__points li{margin-bottom:var(--s3);color:var(--ink-2);line-height:1.55}
.cp__points li:last-child{margin-bottom:0}

/* the monthly bill */
.cp__notes{margin:var(--s5) 0 0;padding-left:1.15em;max-width:76ch}
.cp__notes li{margin-bottom:var(--s2);color:var(--ink-2);font-size:.9375rem;line-height:1.55}

/* prose sections keep a reading measure; an aside, where there is one, takes
   the empty right half on wide screens */
.cp__morewrap--aside{display:grid;gap:var(--s6)}
@media(min-width:960px){.cp__morewrap--aside{grid-template-columns:minmax(0,1fr) 380px;gap:var(--s8);align-items:start}}
.cp__aside{background:var(--paper);border-radius:var(--r-card);padding:var(--s5) var(--s6);
  box-shadow:var(--ring),var(--sh-md)}
.cp__asidet{margin:0 0 var(--s3);color:var(--ink);font-weight:700}
.cp__asidetable{width:100%;border-collapse:collapse;font-size:.9375rem}
.cp__asidetable th,.cp__asidetable td{padding:var(--s2) 0;text-align:left;box-shadow:0 1px 0 var(--rule)}
.cp__asidetable thead th{color:var(--ink);font-weight:700}
.cp__asidetable tbody th{color:var(--muted);font-weight:500;padding-right:var(--s3)}
.cp__asidetable tbody td{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.cp__asidetable td + td,.cp__asidetable th + th{padding-left:var(--s3)}
.cp__asidetable tbody tr:last-child th,.cp__asidetable tbody tr:last-child td{box-shadow:none}
.cp__asiden{margin:var(--s3) 0 0;color:var(--muted);font-size:.8125rem;font-style:italic}
/* prose sections keep a reading measure */
.cp__prose{max-width:var(--w-text)}
.cp__prose p:last-child{margin-bottom:0}

/* where each falls down: two columns of the counted list */
.cp__weak{display:grid;gap:var(--s7)}
@media(min-width:900px){.cp__weak{grid-template-columns:1fr 1fr;gap:var(--s6)}}
.cp__weakh{margin:0 0 var(--s4);color:#fff;font-size:1.25rem}
@media(min-width:860px){.cp__weak .bad{grid-template-columns:1fr}}

/* =====================================================================
   ALTERNATIVES LAYOUT - /compare/{tool}-alternatives/
   Organised by the reason a reader is leaving the base tool. Each reason
   names one pick, so the page order is the reader's question, not a rank.
   Hero picked 26 Sept 2026 (design/approved/alternatives-hero-switchboard.css).
   Everything else reuses the comparison and review parts.
   ===================================================================== */

.alt section[id]{scroll-margin-top:80px}
/* the disclosure under the cards sits on the light underlay, not the band */
.alt .underlay .cp__disc{color:var(--muted)}

/* =====================================================================
   SITE PAGES - /about/, /affiliate-disclosure/, /privacy/, /contact/
   Same sheet hero as the hubs, plain prose sections. The contact block is
   the one new part.
   ===================================================================== */
.sp__addr{margin:2px 0 0;font-size:1.375rem;font-weight:700;letter-spacing:-.01em}
.sp__note{margin:var(--s3) 0 0;color:var(--ink-2)}
.sp__placeholder{margin:var(--s2) 0 0;padding:var(--s3) var(--s4);border-radius:var(--r-btn);
  background:var(--highlight-50);color:var(--highlight-ink);font-weight:600;font-size:.9375rem;line-height:1.5}
.sp .section + .section{padding-top:0}
/* on the bare underlay, not inside a .mth card: the darker teal keeps it above 4.5:1 */
.sp .mth__link{color:var(--brand-800)}

/* =====================================================================
   GUIDE LAYOUT - /guides/{slug}/
   The free method first as numbered step cards, then the ceiling, then the
   paid shortcut. Hero picked 26 Sept 2026 (design/approved/guide-hero-timeline.css).
   ===================================================================== */

.faq code{background:var(--paper-2);padding:2px 6px;border-radius:4px;font-size:.9em}

/* body: the shortcut table */
.gd__after{margin-top:var(--s6)}
.gd .underlay .gd__disc{color:var(--muted)}
.gd section[id]{scroll-margin-top:80px}

/* =====================================================================
   BUILD PROGRESS - local bench only (rei_is_bench(), body.rei-bench).
   Counts per menu section, a done mark on written entries, and the
   Progress dropdown. None of this renders on a live host.
   ===================================================================== */
.nav__progress{display:flex;align-items:center;gap:var(--s3);margin:0 0 var(--s4);
  color:var(--good);font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.prog__bar{position:relative;display:block;flex:1 1 auto;height:6px;border-radius:999px;background:var(--paper-2);
  box-shadow:var(--ring);overflow:hidden;min-width:60px}
.prog__bar > span{position:absolute;left:0;top:0;bottom:0;background:var(--good);border-radius:999px}
.rei-bench .nav__group a .nav__name::before{content:"\2713";margin-right:6px;color:var(--good);font-weight:700}
.nav__link--prog b{margin-left:4px;padding:1px 7px;border-radius:999px;background:var(--highlight-50);
  color:var(--highlight-ink);font-size:.75rem}
.head--dark .nav__link--prog b{background:var(--highlight-50);color:var(--highlight-ink)}
.prog{display:grid;gap:var(--s5) var(--s6);grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.prog__head{display:flex;justify-content:space-between;gap:var(--s3);margin:0 0 var(--s2);
  color:var(--ink);font-weight:700;font-size:.9375rem}
.prog__head span:last-child{color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.prog__lefth{margin:var(--s3) 0 var(--s1);color:var(--muted);font-size:.6875rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase}
.prog__left{margin:0;padding:0;list-style:none;display:grid;gap:3px}
.prog__left li{color:var(--ink-2);font-size:.8125rem;line-height:1.35}
.prog__all{margin:var(--s3) 0 0;color:var(--good);font-size:.8125rem;font-weight:700}
.mnav__count{margin-left:auto;margin-right:var(--s2);color:var(--muted);font-weight:600;font-size:.75rem}
/* The desktop nav has room for a sixth item from 1100px (at 1024 two labels wrapped).
   Below that the per-section counts inside each dropdown carry the progress, and the
   mobile menu has its own list. */
@media(max-width:1099px){.nav__item--prog{display:none}}
.nav__link--prog{white-space:nowrap}
/* a status tag never splits across lines ("to / write" on a phone) */
.nav__soon{white-space:nowrap;display:inline-block}

/* =====================================================================
   DESIGN v1 (design/v1-plan.md). Everything below is v1. v0 lives whole in
   design/approved/v0/. Direction-specific homepage CSS is in
   assets/css/v1-home.css until a direction is picked.
   ===================================================================== */

/* ---------- FONTS v1: one heading face, body stays on the system stack ----------
   font-display:optional, measured 27 Sept 2026 on a throttled phone against v0: swap cost about
   180ms to first paint, and metric-matched local() fallback faces another 100ms; optional costs
   nothing (parity with v0). It never swaps mid-view, so no layout shift and no fallback faces are
   needed: a first page on a slow connection may keep the system face, the font is then cached and
   every later page uses it. Details: BUILD-LOG.md, Phase 9. */
@font-face{font-family:"Heading";src:url(assets/fonts/plus-jakarta-sans.woff2) format("woff2");font-weight:500 800;font-display:optional}
:root{--font-head:"Heading",var(--font)}
h1,h2,h3,h4,.num,.brand,.calc__n{font-family:var(--font-head)}
.num,.calc__amt,.calc__n{font-variant-numeric:tabular-nums lining-nums}

/* ---------- MOTION SYSTEM v1 ----------
   Measured on reviews.io (research/design-refs/reviews-io/analysis.md). Only marks
   get a starting state, only under .motion-ok (set in <head> when the reader has
   not asked for reduced motion), only via transform, opacity or stroke-dashoffset. */
:root{
  --ease-io:cubic-bezier(.645,.045,.355,1);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-proof:cubic-bezier(.34,1.26,.64,1);
  --d-ui:.3s; --d-unveil:.42s; --d-reveal:.5s; --d-draw:1s; --d-proof:1.2s; --d-fade:1.5s;
  --stagger:70ms;
  --sig-pre:#C2412D; --sig-tax:#B77F00; --sig-vac:#138172; --sig-pro:#5B55D0;
}
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.25s}
}
.site-head{view-transition-name:site-head}

/* ---------- EVIDENCE COMPONENTS v1 ---------- */
/* tool mark: the vendor's own icon, beside its name, never bigger than the name */
.tlogo{display:inline-block;flex:none;border-radius:24%;background:#fff;box-shadow:rgba(2,62,85,.16) 0 0 0 1px;vertical-align:-.35em;object-fit:cover}
.tname{display:inline-flex;align-items:center;gap:.55em;min-width:0}
.tname>span{min-width:0}

/* signals: colour is never the only cue, every use carries a label */
.sig-pre{--sig:var(--sig-pre)} .sig-tax{--sig:var(--sig-tax)} .sig-vac{--sig:var(--sig-vac)} .sig-pro{--sig:var(--sig-pro)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:99px;font-size:.72rem;font-weight:700;
  color:var(--ink);background:var(--paper-2);box-shadow:var(--ring)}
.chip[class*="sig-"]::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sig)}
.chip--line{color:var(--muted);font-weight:600}
.siglegend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;padding:0;list-style:none;font-size:.8rem;font-weight:600;color:var(--ink-2)}
.siglegend li{display:inline-flex;align-items:center;gap:6px}
.siglegend i{width:10px;height:10px;border-radius:50%;background:var(--sig)}

/* ---------- COST CALCULATOR ---------- */
.calc{position:relative;background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--ring),var(--sh-md);padding:var(--s6)}
@media(min-width:760px){.calc{padding:var(--s7)}}
.calc__inputs{display:grid;grid-template-columns:1fr auto;align-items:end;gap:var(--s2) var(--s5);margin-bottom:var(--s6)}
.calc__label{display:block;color:var(--muted);font-size:.75rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:0}
.calc__n{justify-self:end;font-size:2.25rem;font-weight:800;line-height:1;color:var(--ink);letter-spacing:-.02em}
.calc__range{grid-column:1/-1;width:100%;margin:var(--s2) 0 0;accent-color:var(--brand);height:28px;cursor:pointer}
.calc__ticks{grid-column:1/-1;display:flex;justify-content:space-between;color:var(--muted);font-size:.75rem;margin-top:-4px}
.calc__people{grid-column:1/-1;display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:var(--s3) 0 0;padding:0;border:0}
.calc__people legend{float:left;margin-right:var(--s3)}
.calc__people label{position:relative}
.calc__people input{position:absolute;opacity:0;width:100%;height:100%;inset:0;margin:0;cursor:pointer}
.calc__people span{display:grid;place-items:center;min-width:38px;height:34px;border-radius:9px;box-shadow:var(--ring);
  font-weight:700;color:var(--ink-2);background:var(--paper);transition:background var(--d-ui) var(--ease-io),color var(--d-ui) var(--ease-io)}
.calc__people input:checked+span{background:var(--ink);color:#fff;box-shadow:none}
.calc__people input:focus-visible+span{outline:3px solid var(--brand-300);outline-offset:2px}
.calc__rows{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.calc__row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,2fr) 5.2rem;grid-template-areas:"tool bar amt" "plan note note";
  align-items:center;column-gap:var(--s4);padding:10px 12px;border-radius:12px;transition:transform var(--d-reveal) var(--ease-io),background var(--d-ui)}
.calc__row:first-child{background:#FFF0C4;box-shadow:inset 4px 0 0 #B26B00}
.calc__tool{grid-area:tool;font-weight:700;color:var(--ink);font-size:.95rem}
.calc__bar{grid-area:bar;height:10px;border-radius:99px;background:#DCE8EB;box-shadow:inset 0 0 0 1px rgba(2,62,85,.08);overflow:hidden}
.calc__bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#1B8C98,var(--brand));
  transform:scaleX(var(--w,0));transform-origin:0 50%;transition:transform .6s var(--ease-io)}
.calc__row:first-child .calc__bar{background:#E8CF85;box-shadow:inset 0 0 0 1px rgba(122,74,0,.18)}
.calc__row:first-child .calc__bar i{background:linear-gradient(90deg,#C98A00,#A86400)}
.calc__amt{grid-area:amt;justify-self:end;font-weight:800;color:var(--ink);font-size:1.05rem}
.calc__plan{grid-area:plan;color:var(--muted);font-size:.78rem;padding-left:calc(24px + .55em)}
.calc__note{grid-area:note;color:var(--ink-2);font-size:.78rem}
.calc__row.is-none .calc__tool,.calc__row.is-none .calc__amt{color:var(--muted);font-weight:600}
.calc__row.is-none .calc__bar{visibility:hidden}
.calc__sum{margin:var(--s5) 0 0;font-weight:700;color:var(--ink)}
.calc__foot{margin:var(--s3) 0 0;color:var(--muted);font-size:.8rem;line-height:1.5}
.motion-ok .calc:not(.is-in) .calc__bar i{transform:scaleX(0)}
@media(max-width:560px){
  .calc__people legend{float:none;width:100%;margin:0 0 6px}
  .calc__row{grid-template-columns:minmax(0,1fr) 4.6rem;grid-template-areas:"tool amt" "bar bar" "plan plan" "note note";row-gap:6px}
  .calc__plan{padding-left:0}
}
/* ---------- DEVICE: a phone holding the vendors' own screens, credited ----------
   Graphite frame with side buttons, a camera island, and a status bar drawn in each app's own
   header colour (data/screens.json "top"), so a cropped screen reads as the whole phone. */
.device{margin:0;position:relative;width:min(100%,290px);container-type:inline-size}
/* Every part is sized in cqw (1% of the phone's own width, 2.9px at the full 290px), so a small card
   phone keeps a real phone's proportions: the island, status bar and corners shrink with it. */
.device__frame{position:relative;padding:2.8cqw;border-radius:17.2cqw;
  background:linear-gradient(150deg,#5b6a74 0%,#232e35 16%,#0f181d 48%,#1e2a31 78%,#3f4d56 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 0 0 1.4cqw #0a1014,0 46px 70px -30px rgba(1,18,28,.72),0 16px 28px -12px rgba(1,18,28,.5)}
.device__frame::before,.device__frame::after{content:"";position:absolute;width:1cqw;border-radius:2px;background:linear-gradient(90deg,#1b252b,#46545d)}
.device__frame::before{left:-1cqw;top:21%;height:7%;box-shadow:0 17.9cqw 0 #2a363d,0 32.4cqw 0 #2a363d}
.device__frame::after{right:-1cqw;top:27%;height:12%}
.device__screen{position:relative;overflow:hidden;border-radius:14.5cqw;background:#000;aspect-ratio:9/19}
.device__screen::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;
  background:linear-gradient(118deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 26%,rgba(255,255,255,0) 40%)}
.device__bars{position:absolute;inset:0 0 auto;height:12.4cqw;z-index:2}
.device__bar{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 6.9cqw 0 9.7cqw;
  background:var(--sb,#fff);color:var(--si,#0b1115);font:700 4.3cqw/1 var(--font);letter-spacing:.01em;opacity:0;
  transition:opacity var(--d-fade) var(--ease-io)}
.device__bar.is-on{opacity:1}
.device__sys{width:17.2cqw;height:3.8cqw;fill:currentColor}
.device__island{position:absolute;z-index:3;top:3.1cqw;left:50%;width:29.7cqw;height:8.3cqw;margin-left:-14.85cqw;border-radius:4.8cqw;background:#04070a}
.device__view{position:absolute;inset:12.4cqw 0 0;overflow:hidden;background:#e9eef0}
.device__shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;opacity:0;display:none;
  transition:opacity var(--d-fade) var(--ease-io)}
.device__shot.is-on,.device__shot.is-prev,.device__shot.is-next{display:block}
.device__shot.is-on{opacity:1}
.device__shot.is-contain{object-fit:contain;object-position:50% 0;background:#fff}   /* shown whole, the app's white below */
.device__caps{display:grid;margin-top:var(--s4)}
.device__cap{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity var(--d-reveal) var(--ease-io),visibility 0s var(--d-reveal)}
.device__cap.is-on{opacity:1;visibility:visible;transition-delay:0s}
.device__cap .tname{font-weight:700}
.device__shows{display:block;margin-top:4px;font-size:.85rem;line-height:1.4}
.device__credit{display:block;margin-top:3px;font-size:.72rem;opacity:.85}
.cycle__toggle{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s3);padding:4px 10px;border:0;border-radius:99px;cursor:pointer;
  font:600 .75rem var(--font);color:inherit;background:rgba(127,127,127,.16)}
.cycle__toggle[hidden]{display:none}
.cycle__icon{width:8px;height:10px;border-left:3px solid currentColor;border-right:3px solid currentColor}
/* a play triangle when paused, and when motion is off the button steps: "Next screen" */
.cycle__toggle[aria-pressed="true"] .cycle__icon,:root:not(.motion-ok) .cycle__icon{border:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;width:0;height:0}
/* the small phone on a card: a lighter shadow, the credit in the card's own grey */
.device--mini{width:100%}
.device--mini .device__frame{box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),inset 0 0 0 1.4cqw #0a1014,0 20px 34px -18px rgba(1,18,28,.55)}
.device--mini .device__caps{margin-top:var(--s2)}
.device--mini .device__credit{font-size:.66rem;line-height:1.35;color:var(--muted);opacity:1}

/* ---------- PARCEL MAP (our survey drawing; .plat is v0's faint decoration) ---------- */
.pmap{display:block;width:100%;height:100%;
  --plat-line:rgba(15,108,119,.46);--plat-street:#E4DECF;--plat-foot:rgba(2,62,85,.16);--plat-text:rgba(2,62,85,.62)}
.pmap__lots{fill:none;stroke:var(--plat-line);stroke-width:.8}
.pmap__streets rect{fill:var(--plat-street)}
.pmap__foot{fill:var(--plat-foot)}
/* SVG text paints with currentColor so its colour is a real, measurable CSS colour */
.pmap text{fill:currentColor;color:#3A5E6C;paint-order:stroke;stroke:#F6F1E5;stroke-width:2.6px;stroke-linejoin:round}
.pmap__apn text{font:600 6.5px var(--font);text-anchor:middle}
.pmap__names text{font:700 7.5px var(--font);letter-spacing:.14em;color:#2F5462}
.pmap__hl rect{fill:color-mix(in srgb,var(--sig) 20%,transparent);stroke:color-mix(in srgb,var(--sig) 70%,transparent);stroke-width:1.2}
/* a lot on several lists: one outline for all its signals (rei_parcel_svg draws its pins side by side) */
.pmap__hl rect.is-stack{fill:rgba(2,62,85,.12);stroke:var(--ink);stroke-dasharray:3 2}
.pmap__scale path,.pmap__north path{fill:none;stroke:var(--plat-text);stroke-width:1.2}
.pmap__north path{fill:var(--plat-text)}
.pmap__scale text,.pmap__north text{font:700 7px var(--font);text-anchor:middle;color:#2F5462}
.pin path{fill:var(--sig);stroke:#fff;stroke-width:1.6}
.pin circle{fill:#fff}
/* blueprint: the same survey drawing on a dark ground, as a background (the dark band) */
.pmap--blueprint{--plat-line:rgba(126,227,237,.2);--plat-street:rgba(126,227,237,.07);--plat-foot:rgba(126,227,237,.09)}
.pmap--blueprint text{color:rgba(190,236,242,.55);stroke:none}
.pmap--blueprint .pmap__hl rect{fill:color-mix(in srgb,var(--sig) 22%,transparent);stroke:color-mix(in srgb,var(--sig) 55%,transparent)}
.pmap--blueprint .pin path{stroke:#06242f}
.pin__b{transform-box:fill-box;transform-origin:50% 100%;
  transition:transform var(--d-reveal) var(--ease-proof) calc(var(--i,0) * var(--stagger) + .15s),opacity .3s ease calc(var(--i,0) * var(--stagger) + .15s)}
.motion-ok .pmap__pins:not(.is-in) .pin__b{opacity:0;transform:translateY(-14px) scale(.6)}

/* record cards: generic, grey bars instead of values, always tagged */
.rcard{position:absolute;z-index:2;width:236px;padding:14px 16px 12px;border-radius:14px;background:#fff;
  box-shadow:rgba(2,62,85,.12) 0 0 0 1px,var(--sh-lg);color:var(--ink);font-size:.8rem}
.rcard__kicker{margin:0 0 8px;font-size:.66rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--brand-800)}
.rcard dl{margin:0;display:grid;gap:7px}
.rcard dl div{display:grid;grid-template-columns:5.6rem 1fr;align-items:center;gap:8px}
.rcard dt{color:var(--muted);font-weight:600;font-size:.72rem}
.rcard dd{margin:0}
.rcard ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.rcard li{display:grid;grid-template-columns:4.9rem 1fr;align-items:center;gap:8px}
.skel{display:block;height:8px;width:var(--sw,70%);border-radius:4px;background:#DDE8EA;transform-origin:0 50%;
  transition:transform .6s var(--ease-io) .25s}
.rcard__chips{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0 0}
.rcard__foot{margin:9px 0 0;font-size:.72rem;color:var(--ink-2);font-weight:600}
.rcard__tag{display:block;margin-top:8px;font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rcard__stamp{position:absolute;right:14px;bottom:12px;padding:1px 7px;border:2px solid rgba(194,65,45,.75);border-radius:4px;
  color:rgba(170,52,38,.95);font:800 .62rem var(--font);letter-spacing:.12em;text-transform:uppercase;transform:rotate(-8deg);
  transition:transform var(--d-ui) var(--ease-proof) .5s,opacity .18s ease .5s}
.motion-ok .rcard:not(.is-in) .skel{transform:scaleX(0)}
.motion-ok .rcard:not(.is-in) .rcard__stamp{opacity:0;transform:rotate(-16deg) scale(1.7)}

/* dark cards with a cursor spotlight (motion.js sets --mx/--my/--mo) */
.spot{position:relative;isolation:isolate}
.spot::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:var(--mo,0);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(126,227,237,.16),transparent 60%);transition:opacity var(--d-ui) ease}

/* =====================================================================
   v1 NAVIGATION, picked 27 Sept 2026 (archived in design/approved/nav-v1*; folded into style.css at the
   lock). The sheets take the hero's tone: .nav-v1--a light, .nav-v1--b dark, chosen per page by
   rei_nav_style(); tools/check_nav_tone.py keeps the two in step.
   Every dropdown is a full-width sheet that starts flush at the bar's bottom edge. Moving straight
   down from any trigger lands in its own sheet, so the pointer never crosses another trigger on the
   way. v0 pinned the two-column panel to the right edge: Compare's sat under Guides and closed.
   Fade only (Gate 1: nav panels fade, text never slides), with a short grace on close.
   ===================================================================== */
.nav-v1 .site-head__in{position:static}
.nav-v1 .nav__item{position:static}
/* Hover intent, CSS only. A sheet opens once the pointer has rested on its trigger for .12s, so a
   diagonal that skims a neighbouring trigger on its way down does not open that one; and a sheet
   the pointer leaves stays whole for .15s, then fades, still catchable until it is gone. Keyboard
   focus opens at once. */
/* no pointer-events switch: it flips at once, so a sheet in its grace period could not catch the
   pointer. visibility alone makes a closed sheet untouchable, and it only flips after the grace. */
.nav-v1 .nav__panel{position:absolute;left:0;right:0;top:100%;width:auto;padding:0;z-index:60;opacity:0;visibility:hidden;pointer-events:auto;
  transition:opacity var(--d-ui) var(--ease-io) .15s,visibility 0s linear .45s}
.nav-v1 .nav__item:hover > .nav__panel{z-index:61;opacity:1;visibility:visible;
  transition:opacity var(--d-ui) var(--ease-io) .12s,visibility 0s linear .12s}
.nav-v1 .nav__item:focus-within > .nav__panel{opacity:1;visibility:visible;transition-delay:0s}
.nav__sheet{max-height:calc(100vh - 64px);overflow-y:auto;overscroll-behavior:contain}
/* Two rows: the lead line across the top, then the columns and the card side by side, both starting
   on the same line. The card sits level with the first titles, and where the list is shorter than
   the card, the card's height sets the sheet's (Yassir, 27 Sept 2026: centred or top-pinned, it
   looked misplaced). */
.nav__grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0 var(--s7);padding:var(--s6) 0 var(--s7)}
.nav__grid > .nav__lead{grid-column:1/-1}
.nav__lead{margin:0 0 var(--s4);font-size:.9rem;line-height:1.45}
.nav__cols{display:grid;gap:var(--s5) var(--s7)}
.nav__cols--compare{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.nav__cols--guides{grid-template-columns:repeat(3,minmax(0,1fr))}
.nav__cols--reviews .nav__list,.nav__cols--best .nav__list{grid-template-columns:repeat(2,minmax(0,1fr))}
.nav__gtitle{display:flex;align-items:center}
.nav__dot{width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--sig)}
.nav__list{list-style:none;margin:0;padding:0;display:grid;gap:2px var(--s3)}
/* (0,2,0): v0's `.nav__group a{display:block}` is (0,1,1) and stacked the mark, name and line */
.nav-v1 .nav__row{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;font-size:inherit;text-decoration:none;transition:background var(--d-ui) var(--ease-io)}
a.nav__row:hover{text-decoration:none}
.nav-v1 .nav__list--rich .nav__row{padding:10px}
.nav__marks{display:inline-flex;flex:none}
.nav__marks .tlogo{width:30px;height:30px;border-radius:9px}
.nav__marks .tlogo + .tlogo{margin-left:-5px}
.nav__rt{display:flex;flex-direction:column;min-width:0}
.nav__row .nav__name{font-weight:700;font-size:.92rem;line-height:1.3}
.nav__line{margin-top:2px;font-size:.8rem;line-height:1.35}
.nav__chip{margin-left:auto;padding:2px 9px;border-radius:99px;font-size:.72rem;font-weight:800;white-space:nowrap}
.nav__row.is-planned{cursor:default}
.nav__row .nav__soon{margin-left:auto}
.nav__feat{display:flex;flex-direction:column;align-self:start;padding:var(--s5);border-radius:var(--r-card)}
.nav__feath{margin:0 0 var(--s3);font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.nav__featt{margin:0;font-size:.98rem;font-weight:700;line-height:1.45}
.nav__featcta{display:inline-flex;align-items:center;gap:8px;margin-top:var(--s4);font-weight:700;font-size:.9rem}
.nav__featcta:hover{text-decoration:none}
.nav__featcta:hover .arw{transform:translateX(3px)}
.nav__cloud{display:grid;grid-template-columns:repeat(4,34px);gap:10px;margin:0 0 var(--s4)}
.nav__cloud .tlogo{width:34px;height:34px;border-radius:10px}
.nav__map{height:128px;margin:0 0 var(--s4);border-radius:12px;overflow:hidden}
.nav__map .pmap{width:100%;height:100%}
.nav__feat .nav__progress{margin:var(--s5) 0 0;padding-top:var(--s4);border-top:1px solid var(--rule)}
.nav-v1--b .nav__feat .nav__progress{border-top-color:rgba(255,255,255,.12)}
.nav-v1--b .prog__bar{background:rgba(255,255,255,.14)}   /* bench-only progress: the light track glared on the dark sheet */
.nav__progwrap{padding:var(--s6) 0 var(--s7)}
.rei-bench .nav-v1 .nav__row .nav__name::before{content:none}
@media(max-width:1180px){.nav__grid{grid-template-columns:minmax(0,1fr) 250px;gap:0 var(--s6)}.nav__cols--guides{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- a: light sheets ---------- */
.nav-v1--a .nav__sheet{background:#fff;box-shadow:0 1px 0 var(--rule) inset,0 28px 50px -22px rgba(2,45,62,.30)}
.nav-v1--a .nav__lead{color:#4A6470}
.nav-v1--a .nav__row{color:var(--ink)}
.nav-v1--a a.nav__row:hover{background:var(--paper-2)}
.nav-v1--a .nav__line{color:#4A6470}
.nav-v1--a .nav__chip{background:var(--brand-50);color:var(--brand-800)}
.nav-v1--a .nav__row.is-planned{color:#4A6470}
.nav-v1--a .nav__marks .tlogo + .tlogo{box-shadow:0 0 0 2px #fff}
.nav-v1--a .nav__feat{background:
  radial-gradient(70% 60% at 90% 0%,rgba(43,165,178,.16),transparent 70%),
  linear-gradient(rgba(2,62,85,.05) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,rgba(2,62,85,.05) 1px,transparent 1px) 0 0/22px 22px,#F4F9F9;
  box-shadow:inset 0 0 0 1px var(--rule)}
.nav-v1--a .nav__feath{color:var(--brand-800)}
.nav-v1--a .nav__featt{color:var(--ink)}
.nav-v1--a .nav__featcta{color:var(--brand-800)}
.nav-v1--a .nav__map{box-shadow:inset 0 0 0 1px var(--rule)}

/* ---------- b: dark sheets, the bar carried down ---------- */
.nav-v1--b .nav__sheet{background:linear-gradient(180deg,#023E55 0%,#05303F 100%);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 34px 60px -24px rgba(0,0,0,.55)}
.nav-v1--b .nav__lead,.nav-v1--b .nav__blurb{color:#B8D4DE}
.nav-v1--b .nav__gtitle{color:#7EE3ED}
.nav-v1--b .nav__row{color:#fff}
.nav-v1--b a.nav__row:hover{background:rgba(255,255,255,.08)}
.nav-v1--b .nav__line{color:#B8D4DE}
.nav-v1--b .nav__chip{background:rgba(126,227,237,.14);color:#9FE7EF}
.nav-v1--b .nav__row.is-planned{color:#A9C7D0}
.nav-v1--b .nav__marks .tlogo + .tlogo{box-shadow:0 0 0 2px #03374A}
.nav-v1--b .nav__all{color:#9FE7EF;border-top-color:rgba(255,255,255,.12)}
.nav-v1--b .nav__feat{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.nav-v1--b .nav__feath{color:#F7C84A}
.nav-v1--b .nav__featt{color:#fff}
.nav-v1--b .nav__featcta{color:#9FE7EF}
.nav-v1--b .nav__featcta:hover{color:#fff}
/* the map in its blueprint dress (the dark bands' version); the pins keep their signal colours */
.nav-v1--b .nav__map{background:#04303F}
.nav-v1--b .nav__map .pmap text{color:rgba(190,236,242,.88)}   /* the band's .55 reads 3.7:1 at this size */
.nav-v1--b .nav__progress,.nav-v1--b .prog__head,.nav-v1--b .prog__lefth,.nav-v1--b .prog__left,.nav-v1--b .prog__all{color:#D3E7EE}

/* ---------- mobile: the same entries, marks and page-order names ---------- */
.mnav__row{display:flex!important;align-items:center;gap:10px}
.mnav__row .nav__marks .tlogo{width:22px;height:22px;border-radius:6px}
.mnav__row .nav__marks .tlogo + .tlogo{margin-left:-7px;box-shadow:0 0 0 2px #fff}
.mnav__sub .nav__gtitle{display:flex;align-items:center}

/* ---------- the phone drawer follows the same tone ---------- */
.nav-v1--b .mnav__panel{background:linear-gradient(180deg,#023E55 0%,#05303F 100%);box-shadow:0 22px 48px -18px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.12)}
.nav-v1--b .mnav__top,.nav-v1--b .mnav__sec > summary,.nav-v1--b .mnav__panel a{color:#fff}
.nav-v1--b .mnav__sec > summary:hover,.nav-v1--b .mnav__sec[open] > summary,.nav-v1--b .mnav__panel a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-v1--b .mnav__sub a{color:#D3E7EE}
.nav-v1--b .mnav__sub a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-v1--b .mnav__na,.nav-v1--b .mnav__count{color:#A9C7D0}
.nav-v1--b .mnav__all{color:#9FE7EF}
.nav-v1--b .mnav__row .nav__marks .tlogo + .tlogo{box-shadow:0 0 0 2px #03374A}
/* the menu button on the dark bar: open, it turned near-white behind its white bars (a blank square) */
.head--dark .mnav>summary:hover,.head--dark .mnav[open]>summary{background:rgba(255,255,255,.14)}

/* =====================================================================
   v1 FOOTER, every page (folded into style.css at the lock, 29 Sept 2026).
   Picked 28 Sept 2026 from a three-way bake-off: the dark band (the header's and the heroes' navy,
   faint survey lines) with the site's commitments as a county record card. One tone on every page:
   every page type ends on a light section (checked on 13 page types), so the band always has a clean
   edge above it. The light sheet (b) and the plain dark band (a) are archived in
   design/approved/footer-v1-bakeoff.*; v0 in design/approved/footer-v0.*.
   ===================================================================== */
.sft{position:relative;padding:var(--s8) 0 var(--s6);font-size:.9375rem;color:#CFE4EB;box-shadow:none;
  background:linear-gradient(160deg,#023E55 0%,#063F55 45%,#0A4A60 100%)}
.sft::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/100% 64px,
             linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/64px 100%,
             radial-gradient(40% 60% at 88% 0%,rgba(126,227,237,.12),transparent 70%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 100%)}
.sft > .wrap{position:relative;z-index:1}

/* the brand, and the record card beside it */
.sft__top{display:grid;gap:var(--s5);align-items:start;padding-bottom:var(--s6);box-shadow:inset 0 -1px 0 rgba(255,255,255,.14)}
@media(min-width:900px){.sft__top{grid-template-columns:minmax(0,1fr) auto;gap:var(--s8);align-items:center}}
.sft__brand,.sft__brand:hover{gap:10px;font-size:1.2rem;font-weight:800;color:#fff}
.sft__brand .brand__lockup{height:34px}
.sft__about{margin:var(--s3) 0 0;max-width:54ch;line-height:1.6;color:#D3E7EE}
.sft__card{position:relative;width:min(100%,440px);padding:var(--s4) var(--s5) var(--s5);border-radius:10px;background:#FFFDF8;color:var(--ink);
  box-shadow:0 26px 44px -24px rgba(0,0,0,.65),0 0 0 6px rgba(126,227,237,.08);transform:rotate(-1.2deg)}
.sft__card::after{content:"Independent";position:absolute;top:14px;right:16px;padding:3px 8px;border-radius:6px;box-shadow:inset 0 0 0 2px #B3261E;
  color:#B3261E;font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;transform:rotate(5deg)}
.sft__cardk{margin:0 0 var(--s3);font-size:.64rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-800)}
.sft__cardl{margin:0}
.sft__cardl div{display:grid;grid-template-columns:7.2rem minmax(0,1fr);gap:var(--s3);padding:8px 0;border-top:1px dashed #C4D4D9}
.sft__cardl dt{padding-top:2px;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#4A6470}
.sft__cardl dd{margin:0;font-size:.9rem;font-weight:600;line-height:1.4;color:var(--ink)}
.sft__cardgo{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s3);font-weight:700;font-size:.88rem;color:var(--brand-800)}
.sft__cardgo:hover{text-decoration:none}
.sft__cardgo .arw{transition:transform var(--d-ui) var(--ease-io)}
.sft__cardgo:hover .arw{transform:translateX(3px)}
@media(max-width:560px){.sft__card{transform:none}.sft__cardl div{grid-template-columns:1fr;gap:2px}}

/* the link columns */
.sft__grid{display:grid;gap:var(--s6) var(--s5);grid-template-columns:repeat(2,minmax(0,1fr));padding-top:var(--s6)}
@media(min-width:760px){.sft__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1100px){.sft__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1.15fr) minmax(0,1.3fr) minmax(0,.8fr)}}
.sft__h{margin:0 0 var(--s4);font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#F7C84A}
.sft__list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.sft__list a{display:inline-flex;align-items:flex-start;gap:9px;line-height:1.35;color:#E6F2F5;text-decoration:none}
.sft__list a:hover{color:#fff;text-decoration:none}
.sft__list a:hover > span{text-decoration:underline;text-underline-offset:3px}
.sft__list a:focus-visible,.sft__cardgo:focus-visible,.sft__brand:focus-visible{outline:3px solid var(--brand-300);outline-offset:3px;border-radius:4px}
.sft__mark{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:-2px;border-radius:6px;background:#fff;overflow:hidden}
.sft__mark .tlogo{display:block;width:18px;height:18px;border-radius:4px}
.sft__hub{margin-top:3px}
.sft__hub a{align-items:center;gap:7px;font-weight:700;color:#9FE7EF}
.sft__hub a:hover{color:#fff}
.sft__hub .arw{transition:transform var(--d-ui) var(--ease-io)}
.sft__hub a:hover .arw{transform:translateX(3px)}

/* the bottom bar: disclosure, trademark line, copyright */
.sft__bottom{display:grid;gap:6px;margin-top:var(--s7);padding-top:var(--s5);font-size:.84rem;line-height:1.55;color:#AFCBD4;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.sft__bottom p{margin:0}
@media(prefers-reduced-motion:reduce){.sft__hub .arw,.sft__cardgo .arw{transition:none}}