/* 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{
  /* The app's violet-indigo #4B39EF, shared with the /app portals. This page previously ran a
     separate pastel blue and the divergence was deliberate, but the owner overruled it on
     2026-08-17: the pale blue read as bland, and because the native app opens on this page and
     signs in at /app/login/, two palettes made one product look like two sites — a visitor
     tapping Sign in believed they had been sent somewhere else.
     Still deliberately NO teal or mint: any green in the mix turns this into "clinical aqua",
     which is what we were asked to avoid. Indigo keeps that guarantee by construction — blue
     leads green by 182 on --brand and by 32-48 on the greys, while red never leads green by
     more than 18, so nothing here can drift green. Measured before shipping: --brand 6.71:1 on
     white, --navy 15.99:1, --ink-mid 8.47:1 on white and 7.69:1 on --page. */
  --brand:#4B39EF; --brand-dark:#3A2BC4; --brand-tint:#EFEDFF; --brand-tint2:#D6CFFF;
  /* 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 search panel: it only reaches 2.70 against the indigo gradient, so those ticks
     stay in the brand colour rather than amber. */
  --accent:#C2701A; --accent-ink:#A85D14; --accent-tint:#FBEEDC;
  --navy:#1E1B4B; --nav-ink:#2E2A6B; --sky-line:#CFC9FA; --label-ink:#443F7A;
  /* 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:#EDEBFF; --g2:#DCD7FF; --g3:#C6BEFF;
  --grad:linear-gradient(112deg,var(--g1) 0%,var(--g2) 55%,var(--g3) 100%);
  --ink:#14181B; --ink-mid:#4A4A6A; --ink-light:#5E5B85;
  --rule:#E0E3E7; --page:#F4F3FB; --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(30,27,75,.06);
  --sh-pop:0 14px 34px -14px rgba(30,27,75,.20);
  --sh-pill:0 6px 18px -6px rgba(30,27,75,.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}

/* ── 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: rows of pointers, not boxed cards ──────────────────────────────── */
.plantable{max-width:60rem;margin:32px auto 0;border-top:1px solid var(--rule)}
.planrow{display:grid;grid-template-columns:minmax(220px,17rem) 1fr;gap:22px 40px;
  padding:30px 0;border-bottom:1px solid var(--rule)}
.planrow.best{background:linear-gradient(90deg,var(--brand-tint),transparent 70%);
  border-bottom-color:var(--brand-tint2)}
.planwho h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:1.25rem;
  color:var(--navy);margin:0 0 6px}
.planpick{font-family:var(--head);font-size:.625rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:#fff;background:var(--brand);border-radius:999px;padding:4px 10px}
.planprice{margin:0 0 2px;color:var(--ink-light);font-size:.8125rem}
.planprice b{font-family:var(--head);font-size:2.375rem;font-weight:800;color:var(--navy);
  letter-spacing:-.03em;margin-right:4px}
.planprice span{font-size:.875rem}
.plancount{margin:0 0 4px;font-size:.8125rem;font-weight:600;color:var(--brand)}
.plantag{margin:0 0 16px;color:var(--ink-mid);font-size:.9375rem}
.planpoints{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:9px 28px;align-content:start}
.planpoints li{display:flex;gap:9px;align-items:flex-start;font-size:.9375rem;color:var(--ink-mid)}
.planpoints svg{width:15px;height:15px;flex:0 0 auto;margin-top:5px;stroke:var(--accent);
  fill:none;stroke-width:2.6}
.plan-fine{margin:24px 0 0;color:var(--ink-light);font-size:.8125rem}
@media (max-width:720px){
  .planrow{grid-template-columns:1fr;gap:16px;padding:26px 0}
  .planrow.best{background:linear-gradient(180deg,var(--brand-tint),transparent 60%)}
}

/* ── 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}

/* ═══════════════════════════════════════════════════════════════════════════════
   POLISH PASS
   The sub-pages started straight onto flat grey with no visual top at all, and every
   section sat on the same background so the page read as one long undifferentiated
   column. Three things fix most of it: a hero band, alternating section surfaces, and
   a consistent section header.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── page hero: gives /for-caregivers/ and /for-agencies/ a proper top ── */
.pagehero{background:var(--grad);border-bottom:1px solid var(--sky-line);
  padding:clamp(44px,6vw,74px) 0 clamp(40px,5vw,64px)}
.pagehero .wrap{max-width:920px}
.pagehero h1{color:var(--navy);margin-bottom:14px}
.pagehero .lead{color:var(--ink-mid);font-size:1.09375rem}
.pagehero .eyebrow{color:var(--brand)}
.pagehero .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:28px 0 0}
.pagehero .fine{margin:14px 0 0;color:var(--label-ink);font-size:.8125rem}

/* ── alternating surfaces so sections read as separate ── */
.sec.band{background:var(--card);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sec.band .card,.sec.band .plain,.sec.band .step,.sec.band .t-card,.sec.band .cat,
.sec.band .path,.sec.band .plan,.sec.band .feat,.sec.band .artcard{background:var(--page)}
.sec.band .faq details{background:var(--page)}

/* ── one consistent section header ── */
.shead{max-width:44em;margin:0 auto}
.shead h2{margin-bottom:10px}
.shead .lead{margin:0 auto}

/* ── numbered steps: connect them, so they read as a sequence ── */
.steps{position:relative}
@media (min-width:900px){
  /* A hairline behind the row, ending inside the first and last circle rather than
     running off the edges. */
  .steps::before{content:"";position:absolute;top:54px;left:12%;right:12%;height:2px;
    background:var(--sky-line);z-index:0}
  .steps .step{position:relative;z-index:1}
}
.step .n{box-shadow:0 0 0 6px var(--page)}
.sec.band .step .n{box-shadow:0 0 0 6px var(--card)}

/* ── the plain-spoken lists: two columns, tighter rhythm ── */
.plain h3{font-size:1.1875rem;margin-bottom:4px}
.plain ul{gap:14px 34px}
.plain li{line-height:1.55}

/* ── pricing: make the chosen plan actually look chosen ── */
.plans{align-items:stretch}
.plan{transition:box-shadow .15s,transform .15s,border-color .15s}
.plan:hover{box-shadow:var(--sh-pop);transform:translateY(-2px)}
.plan.best{position:relative;box-shadow:0 18px 40px -20px rgba(27,58,92,.34)}
.plan.best .plan-flag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--brand);color:#fff;border-radius:999px;padding:4px 14px;margin:0;
  letter-spacing:.1em;white-space:nowrap}
.plan.best h3{margin-top:10px}

/* ── feature list: let the eye find a row ── */
.feat div{transition:background-color .12s}
.feat div:hover{background:var(--brand-tint)}
.feat b{color:var(--navy)}

/* ── tighter, more even vertical rhythm ── */
.sec{padding:clamp(46px,5.5vw,var(--hero-pad)) 0}
.cats,.paths,.t-grid,.steps,.plans{margin-top:32px}
h2{margin-bottom:.45em}

@media (max-width:620px){
  .pagehero{padding:34px 0 30px}
  .pagehero .cta .btn{width:100%}
  .plain ul{gap:12px}
}

/* ── articles ────────────────────────────────────────────────────────────────────
   Long-form reading needs a narrower measure than the rest of the site: ~68 characters
   a line. Wider than that and the eye loses its place returning to the left edge. */
.article{max-width:44rem;margin:0 auto;font-size:1.0625rem;line-height:1.72;color:var(--ink-mid)}
.article h2{font-size:clamp(1.25rem,2.1vw,1.5rem);color:var(--navy);margin:34px 0 12px}
.article h2:first-child{margin-top:0}
.article h3{font-size:1.0625rem;color:var(--navy);margin:24px 0 8px}
.article p{margin:0 0 16px}
.article b{color:var(--ink)}
.article a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.article .ticks{margin:0 0 18px}
.article .ticks li{margin-bottom:11px}
.article .art-ol{margin:0 0 18px;padding-left:1.25rem}
.article .art-ol li{margin-bottom:11px}
.article .art-ol li::marker{color:var(--brand);font-weight:700}
.article .art-note{margin:26px 0 0;padding-top:16px;border-top:1px solid var(--rule);
  font-size:.8125rem;color:var(--ink-light)}
.pagehero .eyebrow a{color:var(--brand);text-decoration:none}
.pagehero .eyebrow a:hover{text-decoration:underline}

.artgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.artcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r-card);box-shadow:var(--sh-card);padding:26px 24px;text-decoration:none;
  transition:box-shadow .15s,border-color .15s,transform .15s}
.artcard:hover{box-shadow:var(--sh-pop);border-color:var(--brand);transform:translateY(-2px)}
.artcard h2{font-size:1.0625rem;color:var(--navy);margin:0 0 8px;line-height:1.35}
.artcard p{color:var(--ink-mid);font-size:.9375rem;margin:0 0 12px}
.artcard .artmeta{margin:auto 0 0;font-size:.75rem;color:var(--ink-light);font-weight:600;
  letter-spacing:.04em;text-transform:uppercase}

/* ── About: the "doing it alone" list, no icons ───────────────────────────────────
   The cross icons read as errors rather than as points, so the list carries itself on the
   bold lead-in and a hairline rule instead. */
.arglist{list-style:none;margin:18px 0 0;padding:0}
.arglist li{padding:14px 0;border-top:1px solid var(--rule);color:var(--ink-mid);font-size:.9375rem;
  line-height:1.6}
.arglist li:first-child{border-top:0;padding-top:4px}
.arglist li b{color:var(--navy)}

/* ─── Phone-first corrections, 2026-08-17 ────────────────────────────────────────────────
   Found by walking the site as a first-time family on a 390x844 phone inside the app's
   WebView. Every number below was measured, not guessed. Appended as its own block rather
   than edited into the rules above so it is one revert if any of it is unwanted. */

@media (max-width:440px){
  /* The whole page scrolled SIDEWAYS by 83px. The header row wanted logo 172px + auth 181px
     + toggle 42px = 395px of content inside 56px of padding, in a 390px viewport. A page that
     slides left and right is the first thing that reads as broken, so this trims the padding,
     the gaps and the pill sizes until the row fits with room to spare. Nothing is hidden:
     "Sign in" and "Sign up" both matter too much to a new visitor to move into a menu. */
  .head-in{padding-left:12px;padding-right:12px;gap:8px}
  .logo{gap:8px}
  .logo .name{font-size:.95rem}
  .head-auth{gap:4px;padding:3px}
  .head-auth a{padding:0 11px;font-size:.8125rem;min-height:40px}
  .navtoggle{margin-left:6px}
}

@media (max-width:560px){
  /* The search panel IS the product, and on a phone it started at y=558 behind a 523px-tall
     banner — a client opening the app saw a photo and had to scroll to find out what the app
     even does. Competitors put the search box on the first screen; so do we now. The banner
     stays, just shorter, and the panel overlaps it less so its FIELDS clear the fold rather
     than only its top edge. */
  /* NB: setting --hero-h alone does nothing here. A rule inside the 980px block sets
     `.hero{min-height:62vh}` DIRECTLY, which wins over `min-height:var(--hero-h)`, so the
     banner stayed 523px tall no matter what the variable said. Override the rule, not the
     variable. 36vh on an 844px phone puts the search FIELDS at roughly y=500, so they clear
     the fold on a small iPhone too, not just a large one. */
  :root{--hero-h:30vh}
  .hero{min-height:30vh}
  .searchcard{margin-top:-36px}
  .searchcard .card.tight{padding:20px 16px}
  .searchcard h1{font-size:1.1875rem;margin-bottom:.35em}
  .searchcard .sub{font-size:.8438rem;line-height:1.5;margin-bottom:12px}
  .seg{margin-bottom:12px}

  /* Apple asks for 44pt tap targets. These were 39px and under, which is the difference
     between a control that responds first time and one a parent jabs at twice. */
  /* "I need care" / "I am a caregiver" decides which half of the marketplace you are in, so it
     is a primary control and was 39px. */
  .seg button{min-height:44px}
  /* The support-chat suggestion buttons ("What does it cost?") were 39px. */
  .chat-sugg button{min-height:40px}
  .chips a{min-height:40px;display:inline-flex;align-items:center}
  .reassure{gap:10px 18px}

  /* 24 links were under 28px tall on a phone, 18 of them in the footer columns at 18px each —
     a stack of 18px targets 8px apart is a guessing game with a thumb. These stay visually
     the same size; they just get a tappable box around them. */
  .f-cols a{min-height:36px;display:inline-flex;align-items:center}
  .f-bot a{min-height:32px;display:inline-flex;align-items:center}
  .paths .go2 a{min-height:40px;display:inline-flex;align-items:center}
}

/* Tablets got the full-height desktop banner (62vh = 732px on an iPad), which pushed the
   headline to y=764 — the first screen was almost entirely photograph. */
@media (min-width:561px) and (max-width:1024px){
  .hero{min-height:44vh}
}

/* iPhone SE and anything else 375px wide or narrower still scrolled sideways by 6px: the
   hamburger's right edge landed at 381px. The culprit is the signed-out header at its widest —
   logo + the joined Sign in / Sign up pair + the toggle — and 6px of sideways slide is enough to
   make a page feel unfinished on the smallest phone people still use.
   Horizontal padding only. Nothing here touches a tap target's HEIGHT, so the 40px+ minimums
   above are unaffected. (Signed in the pair collapses to one "Your account" pill, so that state
   was already clear; this fixes the state a first-time visitor arrives in.) */
@media (max-width:400px){
  .head-in{padding-left:10px;padding-right:10px;gap:6px}
  .head-auth a{padding:0 9px}
  .navtoggle{margin-left:4px}
}