/* The Care Royal — shared stylesheet for every page on the static site.
   Extracted from the inline <style> on 2026-07-31 when the site went from one long page
   to four (/, /for-caregivers/, /for-agencies/, /faq/). Four copies of 25KB of inline CSS
   would have drifted apart within a week. Served same-origin, so the strict
   `style-src 'self' 'unsafe-inline'` CSP still allows it. */
/* ═══════════════════════════════════════════════════════════════════════════════
   THE CARE ROYAL — landing page

   Visual language taken from the live Flutter landing (observed in a browser, not
   guessed): the photo fills the hero, and the content below is white rounded cards
   on a light grey page. The palette is soft pastel blue — no teal, no mint.

   Structure borrowed from the care.com / sittercity marketplace pattern: a search
   bar as the primary action, category tiles, how-it-works, trust, FAQ. Their
   generous pill radii are used; their palettes are not.

   Fonts are the platform stack on purpose. No external font or CDN request, so the
   page paints without a third-party round trip and the CSP stays tight.
   ═══════════════════════════════════════════════════════════════════════════════ */
:root{
  /* Soft pastel blue. Not the app's violet-indigo #4B39EF (the /app portals keep that —
     the divergence is deliberate), and deliberately NO teal or mint: any green in the mix
     turns "calm blue" into "clinical aqua", which is what we were asked to avoid.
     The surfaces read blue because the blue channel leads green by 13-31 while green only
     leads red by 11-29 — keep that relationship if you retune them. --ink-mid is a BLUE-grey
     (#4D5974, blue leads green by 27) for the same reason: the neutral grey it replaced went
     faintly teal against these surfaces, and failed 4.5:1 on the deepest one anyway. */
  --brand:#2C6BB0; --brand-dark:#23568F; --brand-tint:#E9F2FC; --brand-tint2:#C9DEF7;
  /* Amber accent for icons: warm against the blue, and measured — #C2701A clears 3:1 on the
     warm tint (3.26) and on white (3.73), which is the bar for graphical objects. --accent-ink
     is the darker one for anything that is TEXT and needs 4.5:1 (4.95 on white). Amber is NOT
     used on the pastel search panel: it only reaches 2.44 there, so those ticks stay blue. */
  --accent:#C2701A; --accent-ink:#A85D14; --accent-tint:#FBEEDC;
  --navy:#16324F; --nav-ink:#22456E; --sky-line:#B3D0EE; --label-ink:#33547D;
  /* One gentle blue gradient, defined once and reused by the header, the search panel, the
     agency panel and the closing band, so those four areas read as the same colour.
     These are PASTEL, so everything on them is dark ink, not white — a pastel surface
     cannot carry white text at 4.5:1, so lightening the surface and keeping white text
     would have quietly broken every label. Measured: dark headings hit 8.8-10.6:1 on
     these, nav ink 6.5-7.2:1. Brand blue is NOT used for text on --g3 (only 3.95:1);
     that is why --nav-ink exists. */
  --g1:#E3EEFB; --g2:#CFE2F8; --g3:#B7D4F3;
  --grad:linear-gradient(112deg,var(--g1) 0%,var(--g2) 55%,var(--g3) 100%);
  --ink:#14181B; --ink-mid:#4D5974; --ink-light:#567291;
  --rule:#E0E3E7; --page:#F1F4F8; --card:#FFFFFF;
  --r-card:20px; --r-pill:999px; --r-in:14px;
  /* Hairline + a whisper of shadow. Everything floating on its own drop shadow is what
     makes a page look generated; structure should come from alignment and rules. */
  --sh-card:0 1px 2px rgba(20,50,85,.06);
  --sh-pop:0 14px 34px -14px rgba(20,50,85,.20);
  --sh-pill:0 6px 18px -6px rgba(20,50,85,.26);
  --head:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --body:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --maxw:1140px;
  /* 66vh, not 78vh: the search panel is the primary action, and at 78vh it started below
     the fold on a laptop, so the first thing a visitor saw was a photo and nothing to do. */
  --hero-h:66vh;
  --hero-pad:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--head);line-height:1.15;margin:0 0 .5em;font-weight:800;letter-spacing:-.02em}
h1{font-size:clamp(1.9rem,4.4vw,2.9rem)}
/* Headings are navy, not brand indigo. Colouring every heading is the single thing that
   makes a page read as a template; indigo is kept as an accent for eyebrows and links. */
h2{font-size:clamp(1.5rem,2.8vw,2.1rem);color:var(--navy)}
h3{font-size:1.0625rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1rem}
a{color:var(--brand)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.sec{padding:var(--hero-pad) 0}
.card{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-card);
  box-shadow:var(--sh-card);padding:44px 40px}
.card.tight{padding:32px 28px}
.center{text-align:center}
.lead{color:var(--ink-mid);font-size:1.0625rem;max-width:46em;margin:0 auto}
/* The eyebrow carries a short brand rule, so each section opens with a deliberate mark
   instead of another block of centred text. */
.eyebrow{font-family:var(--head);font-size:.6875rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand);margin:0 0 12px}
.eyebrow::after{content:"";display:block;width:32px;height:2px;border-radius:2px;
  background:var(--accent);opacity:.75;margin:9px auto 0}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--card);color:var(--brand);
  padding:12px 20px;font-weight:600;border-radius:0 0 12px 0}
.skip:focus{left:0}
/* The header is sticky, so an un-offset anchor lands its heading UNDERNEATH the header.
   Every in-page link in the tab strip and the footer relies on this. */
[id]{scroll-margin-top:82px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* buttons — care.com-style full pills */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;
  padding:14px 34px;border:0;border-radius:var(--r-pill);cursor:pointer;font:inherit;
  font-family:var(--head);font-weight:700;font-size:1rem;text-decoration:none;
  transition:background-color .15s,color .15s,box-shadow .15s,border-color .15s}
.btn-brand{background:var(--brand);color:#fff;box-shadow:var(--sh-pill)}
.btn-brand:hover{background:var(--brand-dark)}
.btn-outline{background:transparent;color:var(--brand);border:2px solid var(--brand)}
.btn-outline:hover{background:var(--brand-tint)}
.btn-sm{min-height:44px;padding:11px 24px;font-size:.9375rem}

/* ── SITE HEADER: brand gradient, logo left, tabs centred, joined auth pair right ──
   The header is wider than the content column on purpose. The tagline makes the logo
   block ~250px, and logo + seven tabs + the auth pair need ~1110px, which does not fit
   the 1092px content budget. Widening only the header is the fix that keeps all three
   groups on one line without shrinking the tabs into an invisible sideways scroll. */
.site-head{position:sticky;top:0;z-index:60;background:#fff;
  border-bottom:1px solid var(--rule);box-shadow:0 1px 3px rgba(27,58,92,.07)}
.head-in{max-width:1280px;margin:0 auto;padding:9px 28px;display:flex;align-items:center;gap:20px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto;order:1}
/* The Care Royal seal, cut out of "Care Royal - APP ICON 512x512.png": the purple square is
   gone and everything outside the circle is genuinely transparent, so on the white header it
   reads as just the logo. Cut at 4x and downsampled, with the purple/cream edge blend
   re-tinted toward cream — without that a violet halo survives around the rim. */
.logo .mark{width:42px;height:42px;flex:0 0 auto;display:block}
.logo .name{font-family:var(--head);font-weight:800;font-size:1.06rem;color:var(--navy);
  letter-spacing:-.02em;line-height:1.1;white-space:nowrap}
/* The seal's own tagline, so the header says the same thing the logo does. */
.logo .tag{display:block;font-family:var(--body);font-weight:500;font-size:.5938rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--label-ink);
  margin-top:3px;white-space:nowrap}
/* The content column is capped at --maxw, so the header has a FIXED budget of about
   1092px at every desktop size — a wider monitor does not give the tabs more room.
   Logo + tabs + the auth pair must therefore fit inside that budget, or the strip
   scrolls sideways and the first links are cut off with nothing to indicate it.
   That is why the tabs are tight and why there are seven of them, not ten. */
/* margin:0 auto — the tabs sit centred in the space BETWEEN the logo and the auth pair,
   rather than crowding up against the auth pair. */
.tabs{display:flex;gap:0;list-style:none;margin:0 auto;padding:0;order:2;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;max-width:100%}
.tabs::-webkit-scrollbar{display:none}
.tabs a{display:inline-block;padding:9px 12px;border-radius:var(--r-pill);text-decoration:none;
  color:var(--nav-ink);font-size:.875rem;font-weight:500;white-space:nowrap}
.tabs a:hover{background:var(--brand-tint);color:var(--brand)}

/* Hamburger. Hidden at desktop; the media query below turns it on and converts the tab
   strip into a dropdown panel. */
.navtoggle{display:none;order:4;flex:0 0 auto;width:42px;height:42px;padding:0;border:0;
  cursor:pointer;border-radius:12px;background:var(--brand-tint);
  align-items:center;justify-content:center;flex-direction:column}
.navtoggle:hover{background:var(--brand-tint2)}
.navtoggle span{display:block;width:19px;height:2px;margin:2.5px 0;background:var(--nav-ink);
  border-radius:2px;transition:transform .18s,opacity .18s}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* the two auth actions read as one joined control, not two loose buttons */
.head-auth{order:3;flex:0 0 auto;display:flex;align-items:center;
  background:var(--brand-tint);border-radius:var(--r-pill);padding:4px}
.head-auth a{display:inline-flex;align-items:center;justify-content:center;min-height:38px;
  padding:0 18px;border-radius:var(--r-pill);text-decoration:none;font-family:var(--head);
  font-weight:700;font-size:.9rem;white-space:nowrap;transition:background-color .15s,color .15s}
.head-auth .in{color:var(--brand)}
.head-auth .in:hover{background:#fff}
.head-auth .up{background:var(--brand);color:#fff}
.head-auth .up:hover{background:var(--brand-dark)}

/* ── HERO: the photo, kept as the banner. No text over the image. ── */
/* The gradient is only seen for the moment before the banner paints, so it matches the
   rest of the page rather than flashing a bright colour and then disappearing. */
.hero{position:relative;isolation:isolate;min-height:var(--hero-h);
  overflow:hidden;background:var(--grad)}
.hero-img{position:absolute;inset:0;z-index:-1}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 34%}

/* ── search: the primary action, overlapping the banner ──
   Not a plain white box. It is a translucent glass panel over a slow-moving brand
   gradient, so the banner reads through its edges and the panel belongs to the photo
   rather than sitting on top of it. The gradient DRIFTS slowly on purpose — anything
   faster reads as a loading spinner and makes a care site feel unstable. All motion is
   switched off under prefers-reduced-motion by the global rule at the end of this file.
   Selectors are .searchcard .card.tight so they outrank the .card.tight base padding. */
.searchcard{max-width:960px;margin:-64px auto 0;position:relative;z-index:2}
.searchcard .card.tight{
  padding:30px 32px;color:var(--ink);
  background:linear-gradient(118deg,rgba(227,238,251,.95) 0%,rgba(207,226,248,.93) 55%,
    rgba(183,212,243,.94) 100%);
  background-size:260% 260%;
  animation:drift 26s ease-in-out infinite;
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 22px 54px -26px rgba(27,58,92,.34)}
@keyframes drift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
/* The panel is pastel now, so the standard brand focus ring is the readable one. */
.searchcard .card.tight :focus-visible{outline-color:var(--brand)}
.searchcard h1{font-size:clamp(1.1875rem,1.9vw,1.4375rem);text-align:center;color:var(--navy);
  margin:0 0 5px;letter-spacing:-.01em}
.searchcard .sub{text-align:center;color:var(--ink-mid);font-size:.9375rem;margin:0 0 18px}
/* who-is-searching switch, the way care.com splits families from job seekers */
.seg{display:flex;gap:4px;justify-content:center;margin:0 auto 20px;padding:4px;
  background:rgba(255,255,255,.80);border-radius:var(--r-pill);width:max-content;max-width:100%}
.seg button{border:0;background:none;font:inherit;font-family:var(--head);font-weight:700;
  font-size:.875rem;color:var(--ink-mid);padding:9px 20px;border-radius:var(--r-pill);
  cursor:pointer;white-space:nowrap}
.seg button[aria-selected="true"]{background:#fff;color:var(--brand);box-shadow:0 1px 3px rgba(27,58,92,.16)}
.search{display:grid;grid-template-columns:1.3fr 1fr auto;gap:10px}
.search > *{min-width:0}
.search label{display:block;font-family:var(--head);font-size:.6875rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--label-ink);margin:0 0 6px 2px}
.search select,.search input{width:100%;min-width:0;min-height:52px;padding:13px 16px;
  border:1.5px solid var(--sky-line);border-radius:var(--r-in);font:inherit;font-size:1rem;
  color:var(--ink);background:#fff}
.search select:focus,.search input:focus{border-color:var(--brand);outline:none}
.search .go{display:flex;align-items:flex-end}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:18px 0 0;padding:0;list-style:none}
.chips li{display:flex;align-items:center}
.chips b{font-family:var(--body);font-size:.8125rem;color:var(--ink-mid);font-weight:500}
.chips a{font-size:.8125rem;text-decoration:none;color:var(--brand);background:#fff;
  border-radius:var(--r-pill);padding:8px 16px;font-weight:500;border:1px solid var(--sky-line)}
.chips a:hover{background:var(--brand-tint);border-color:var(--brand)}
.reassure{display:flex;gap:6px 20px;flex-wrap:wrap;justify-content:center;margin:20px 0 0;padding:0;
  list-style:none;color:var(--ink-mid);font-size:.8125rem}
.reassure li{display:flex;gap:7px;align-items:center}
.reassure svg{width:15px;height:15px;flex:0 0 auto;stroke:var(--brand);fill:none;stroke-width:2.6}

/* ── the two offerings ── */
.paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:18px;margin-top:34px;align-items:stretch}
.path{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r-card);box-shadow:var(--sh-card);padding:30px 26px;
  transition:box-shadow .15s,border-color .15s}
.path:hover{box-shadow:var(--sh-pop);border-color:var(--brand-tint2)}
/* Flat tinted mark, not a gradient chip. */
.path .ic{width:44px;height:44px;border-radius:13px;margin-bottom:16px;
  background:var(--accent-tint);display:flex;align-items:center;justify-content:center}
.path .ic svg{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:2.1}
.path h3{color:var(--navy);font-size:1.125rem;margin-bottom:8px}
.path p{color:var(--ink-mid);font-size:.9375rem}
.path .who{font-family:var(--head);font-size:.6875rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-light);margin:0 0 8px}
.path .go2{margin-top:auto;padding-top:6px}
.path .go2 a{font-family:var(--head);font-weight:700;font-size:.9375rem;text-decoration:none;
  display:inline-flex;align-items:center;gap:6px}
.path .go2 a::after{content:"";width:7px;height:7px;border-right:2.2px solid currentColor;
  border-top:2.2px solid currentColor;transform:rotate(45deg)}

/* ── categories ── */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));gap:16px;margin-top:34px;align-items:start}
/* Ten equally-weighted drop-shadowed cards is visual noise; hairline tiles that lift on
   hover read as a considered index instead. */
.cat{display:flex;flex-direction:column;gap:8px;padding:18px 16px;text-decoration:none;color:var(--ink);
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r-card);
  transition:box-shadow .15s,border-color .15s,transform .15s}
.cat:hover{box-shadow:var(--sh-pop);border-color:var(--brand);transform:translateY(-2px)}
.cat .ic{width:40px;height:40px;border-radius:var(--r-pill);background:var(--accent-tint);
  display:flex;align-items:center;justify-content:center}
.cat .ic svg{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:2.1}
.cat b{font-family:var(--head);font-size:.9375rem;font-weight:700;line-height:1.3}
.cat small{color:var(--ink-mid);font-size:.8125rem;line-height:1.45}

/* ── steps ── */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:34px;counter-reset:s}
.step{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-card);
  box-shadow:var(--sh-card);padding:30px 26px;text-align:center}
.step .n{counter-increment:s;width:44px;height:44px;margin:0 auto 16px;border-radius:var(--r-pill);
  background:#fff;border:2px solid var(--accent-tint);color:var(--accent-ink);font-family:var(--head);
  font-weight:800;font-size:1.0625rem;display:flex;align-items:center;justify-content:center}
.step .n::before{content:counter(s)}
.step h3{color:var(--navy)}
.step p{color:var(--ink-mid);margin:0;font-size:.9375rem}

/* ── compare table: self-service vs agency, the question every family has ── */
.cmp{margin-top:34px;background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r-card);box-shadow:var(--sh-card);overflow:hidden}
.cmp table{width:100%;border-collapse:collapse;font-size:.9375rem}
.cmp caption{text-align:left;padding:24px 26px 0;color:var(--ink-mid);font-size:.9375rem}
.cmp th,.cmp td{padding:15px 20px;text-align:left;vertical-align:top;border-top:1px solid var(--rule)}
.cmp thead th{border-top:0;font-family:var(--head);font-size:.75rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-light);font-weight:700;padding-top:22px}
.cmp tbody th{font-weight:600;color:var(--ink);width:30%}
.cmp td{color:var(--ink-mid)}
.cmp .hi{background:var(--brand-tint);color:var(--brand);font-weight:600}
.cmp-scroll{overflow-x:auto}

/* ── trust / transparency ── */
.t-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:34px;align-items:start}
.t-card{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-card);
  box-shadow:var(--sh-card);padding:26px}
.t-card .ic{width:42px;height:42px;border-radius:var(--r-pill);
  background:var(--accent-tint);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.t-card .ic svg{width:21px;height:21px;stroke:var(--accent);fill:none;stroke-width:2.1}
.t-card h3{margin-bottom:6px;color:var(--navy)}
.t-card p{color:var(--ink-mid);font-size:.875rem;margin:0}

/* the honest block — what we do not do. This is the part that earns trust. */
.plain{margin-top:22px;background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r-card);box-shadow:var(--sh-card);padding:34px 32px}
.plain h3{color:var(--navy);font-size:1.125rem}
.plain ul{list-style:none;margin:16px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px 28px}
.plain li{display:flex;gap:11px;align-items:flex-start;color:var(--ink-mid);font-size:.9375rem}
.plain li svg{width:17px;height:17px;flex:0 0 auto;margin-top:4px;stroke:var(--accent);fill:none;stroke-width:2.4}
.plain li b{color:var(--ink);font-weight:600}

/* ── feature list for the agency software ──
   Twelve identical shadowed boxes read as a wall of sameness and nothing gets read. As
   one panel split into two hairline-ruled columns it reads like a spec sheet, which is
   what an agency owner is actually scanning. */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;margin-top:30px;
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r-card);
  box-shadow:var(--sh-card);padding:10px 32px 16px}
.feat div{padding:18px 0;border-top:1px solid var(--rule)}
.feat div:nth-child(1),.feat div:nth-child(2){border-top:0}
.feat b{display:block;font-family:var(--head);font-size:.9375rem;font-weight:700;
  margin-bottom:4px;color:var(--navy)}
.feat span{color:var(--ink-mid);font-size:.8438rem;line-height:1.5}


/* ── faq ── */
.faq{max-width:860px;margin:26px auto 0}
.faq h3.grp{font-family:var(--head);font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-light);margin:30px 0 12px 4px;font-weight:700}
.faq h3.grp:first-child{margin-top:0}
.faq details{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-in);
  box-shadow:var(--sh-card);margin-bottom:10px;transition:border-color .15s}
.faq details[open]{border-color:var(--brand-tint2)}
.faq summary:hover{color:var(--brand)}
.faq summary{cursor:pointer;padding:18px 22px;font-family:var(--head);font-weight:700;font-size:.9688rem;
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:52px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:9px;height:9px;flex:0 0 auto;border-right:2.4px solid var(--brand);
  border-bottom:2.4px solid var(--brand);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .a{padding:0 22px 20px;color:var(--ink-mid);font-size:.9375rem}
.faq .a p:last-child{margin:0}

/* ── closing ── */
.closing{background:var(--grad);border:1px solid var(--sky-line);border-radius:var(--r-card);
  padding:56px 40px;text-align:center;color:var(--ink)}
.closing h2{color:var(--navy)}
.closing p{color:var(--ink-mid);max-width:34em;margin:0 auto 28px;font-size:1.0625rem}
.closing .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ── footer ── */
footer{background:var(--card);border-top:1px solid var(--rule);padding:52px 0 30px;font-size:.9375rem;margin-top:var(--hero-pad)}
.f-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:32px}
.f-brand{font-family:var(--head);font-weight:800;font-size:1.1rem;color:var(--brand);letter-spacing:-.02em}
footer .f-h{font-family:var(--head);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-light);margin:0 0 14px;font-weight:700}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:10px}
footer a{color:var(--ink-mid);text-decoration:none}
footer a:hover{color:var(--brand)}
.f-bot{border-top:1px solid var(--rule);margin-top:38px;padding-top:22px;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--ink-light);font-size:.8125rem}
.f-note{color:var(--ink-light);font-size:.75rem;line-height:1.6;margin:14px 0 0;max-width:60em}

/* No footer breakpoint above 980px on purpose: the column is capped at --maxw, so its
   width does not change between 1000px and a 4K monitor. A breakpoint up there would
   reflow the layout at a size where nothing about the available space has changed. */
/* The header needs ~1110px on one line. Below that the tabs collapse into a dropdown
   behind the hamburger, NOT onto their own row under the logo — that row pushed the banner
   down and read as a second header stacked on the first. */
@media (max-width:1180px){
  .head-in{flex-wrap:nowrap}
  .navtoggle{display:flex}
  .head-auth{order:3;margin-left:auto}
  .navtoggle{order:4;margin-left:10px}
  /* Absolute against .site-head, which is sticky and therefore a positioned ancestor. */
  .tabs{position:absolute;left:0;right:0;top:100%;order:0;margin:0;display:none;
    flex-direction:column;background:#fff;padding:8px 16px 14px;overflow:visible;
    border-bottom:1px solid var(--rule);box-shadow:0 18px 26px -16px rgba(27,58,92,.22)}
  .tabs[data-open]{display:flex}
  .tabs a{padding:13px 12px;font-size:.9375rem;border-radius:10px}
  .tabs li+li a{border-top:1px solid var(--rule)}
}
@media (max-width:560px){
  .logo .tag{display:none}   /* the tagline is the first thing to go when space is tight */
}
@media (max-width:980px){
  .f-cols{grid-template-columns:1fr 1fr}
  .card{padding:30px 24px}
  .plain{padding:26px 22px}
  .hero{min-height:62vh}
}
@media (max-width:620px){
  .search{grid-template-columns:1fr}
  .feat{grid-template-columns:1fr;padding:10px 22px 14px}
  .feat div:nth-child(2){border-top:1px solid var(--rule)}
  .f-cols{grid-template-columns:1fr}
  .searchcard{margin-top:-30px}
  .closing{padding:38px 22px}
  .cmp tbody th{width:auto}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* ── get-paired block ────────────────────────────────────────────────────────── */
.pairbox{max-width:700px;margin:30px auto 0;background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r-card);box-shadow:var(--sh-card);padding:30px 28px;text-align:center}
.pairq{font-family:var(--head);font-weight:700;color:var(--navy);margin:0 0 16px;font-size:1.0625rem}
.pairrow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.pairnote{list-style:none;margin:24px 0 0;padding:20px 0 0;border-top:1px solid var(--rule);
  text-align:left;color:var(--ink-mid);font-size:.875rem}
.pairnote li{margin-bottom:9px}
.pairnote li:last-child{margin:0}
@media (max-width:560px){
  .askrow{flex-direction:column}
  .pairrow .btn{width:100%}
}

/* ── customer support chat (/js/support.js) ──────────────────────────────────── */
.chat{max-width:780px;margin:30px auto 0;background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r-card);box-shadow:var(--sh-card);overflow:hidden}
/* A capped, scrolling transcript: it must not grow the page forever as the conversation runs. */
.chat-log{max-height:min(56vh,520px);overflow-y:auto;padding:20px 20px 6px;
  background:linear-gradient(180deg,var(--brand-tint),var(--card) 90px)}
.msg{display:flex;margin-bottom:14px}
.msg.me{justify-content:flex-end}
.bub{max-width:88%;border-radius:16px;padding:14px 16px;font-size:.9375rem;line-height:1.55}
.msg.bot .bub{background:var(--card);border:1px solid var(--sky-line);color:var(--ink-mid);
  border-bottom-left-radius:5px}
.msg.me .bub{background:var(--brand);color:#fff;border-bottom-right-radius:5px}
.bub p{margin:0 0 9px}
.bub p:last-child{margin:0}
.bub .bub-q{font-family:var(--head);font-weight:700;color:var(--navy);font-size:.9688rem}
.bub .bub-fine{font-size:.75rem;color:var(--ink-light)}
.bub .bub-also{margin-top:14px;font-family:var(--head);font-size:.6875rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-light)}
.bub-chips{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.bub-chips button{font:inherit;font-size:.8438rem;text-align:left;cursor:pointer;width:100%;
  color:var(--brand);background:var(--brand-tint);border:1px solid var(--brand-tint2);
  border-radius:10px;padding:9px 12px}
.bub-chips button:hover{background:var(--brand-tint2);border-color:var(--brand)}
.bub-cta{margin-top:14px}
.bub-cta.bub-quiet{margin-top:12px;font-size:.8125rem}
.chat-sugg{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;
  padding:12px 20px;border-top:1px solid var(--rule);background:var(--page)}
.chat-sugg button{font:inherit;font-size:.8125rem;cursor:pointer;color:var(--brand);
  background:var(--card);border:1px solid var(--sky-line);border-radius:var(--r-pill);padding:8px 14px}
.chat-sugg button:hover{background:var(--brand-tint);border-color:var(--brand)}
.chat-form{display:flex;gap:10px;padding:14px 20px 18px;border-top:1px solid var(--rule)}
.chat-form input{flex:1;min-width:0;min-height:50px;padding:12px 16px;border:1.5px solid var(--sky-line);
  border-radius:var(--r-in);font:inherit;font-size:1rem;color:var(--ink);background:#fff}
.chat-form input:focus{border-color:var(--brand);outline:none}

/* ── searchable FAQ ──────────────────────────────────────────────────────────── */
.faqsearch{max-width:860px;margin:0 auto 18px}
.faqsearch input{width:100%;min-height:52px;padding:13px 18px;border:1.5px solid var(--sky-line);
  border-radius:var(--r-pill);font:inherit;font-size:1rem;color:var(--ink);background:#fff}
.faqsearch input:focus{border-color:var(--brand);outline:none}
.faqcount{margin:10px 0 0;padding-left:4px;font-size:.8125rem;color:var(--ink-light)}
.faqnone{max-width:860px;margin:0 auto;background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r-card);padding:26px 24px;text-align:center}
.faqnone p{margin:0 0 8px;color:var(--ink-mid);font-size:.9375rem}
@media (max-width:560px){
  .chat-form{flex-direction:column}
  .chat-form .btn{width:100%}
  .bub{max-width:100%}
}

/* ── pricing (generated from app/lib/plans.ts) ───────────────────────────────── */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:18px;margin-top:34px;align-items:start}
.plan{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r-card);box-shadow:var(--sh-card);padding:28px 24px}
.plan.best{border:2px solid var(--brand);box-shadow:var(--sh-pop)}
.plan-flag{font-family:var(--head);font-size:.625rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand);margin:0 0 8px}
.plan h3{color:var(--navy);font-size:1.125rem;margin-bottom:6px}
.plan-price{margin:0 0 2px;color:var(--ink-light);font-size:.8125rem}
.plan-price span{font-family:var(--head);font-size:2.25rem;font-weight:800;color:var(--navy);
  letter-spacing:-.03em;margin-right:3px}
.plan-who{margin:0 0 6px;font-size:.8125rem;font-weight:600;color:var(--brand)}
.plan-tag{margin:0 0 16px;color:var(--ink-mid);font-size:.9375rem}
.plan-feats{margin:0 0 22px;font-size:.875rem}
.plan-feats li{margin-bottom:8px}
.plan .btn{margin-top:auto}
.plan-fine{margin:24px 0 0;color:var(--ink-light);font-size:.8125rem}

/* ── active tab ──────────────────────────────────────────────────────────────────
   aria-current was being announced to screen readers but was invisible on screen, so a
   sighted visitor had no way to tell which of the four tabs they were on. */
.tabs a[aria-current="page"]{background:var(--brand-tint);color:var(--brand);font-weight:700}
@media (max-width:1180px){
  .tabs a[aria-current="page"]{background:var(--brand-tint)}
}

/* Card hovers were mouse-only. Keyboard users tabbing through the category tiles got the
   focus ring but none of the lift, so the target was harder to track. */
.cat:focus-visible,.path:focus-visible{box-shadow:var(--sh-pop);border-color:var(--brand)}

/* ── "how many near me" counter under the zip field ──────────────────────────────
   Empty until a full zip is typed AND the directory has data for that area, so the layout
   must not reserve space for it. */
.nearby{margin:8px 0 0;font-size:.8125rem;line-height:1.45;color:var(--ink-mid);min-height:0}
.nearby:empty{display:none}
.nearby[data-on]{color:var(--navy)}
.nearby[data-on] b{color:var(--navy);font-weight:700}
.nearby[data-none]{color:var(--ink-mid)}
.nearby[data-none] b{color:inherit}