/* Shared look for the pages around the map: home, sign-up, login, account,
   analytics. The map carries its own styles inside map.html.
   Design language: "night survey" — deep-ink chrome, electric blue + cyan
   accents, condensed display type, and a faint parcel-grid motif. */

:root{
  --ink:#0E1B29; --ink-2:#14212B; --ink-soft:#5A6B78; --paper:#FFFFFF;
  --line:#E2E8ED; --wash:#F4F7FA;
  --night:#0A141F; --night-2:#0F2032; --night-line:rgba(148,196,232,.16);
  --night-ink:#DCE9F5; --night-soft:#8FA9BF;
  --accent:#2563EB; --accent-deep:#1D4ED8; --cyan:#22D3EE;
  --filter:#F59E0B; --policy:#7C3AED; --good:#059669; --bad:#DC2626;
  --sans:'Barlow',-apple-system,'Segoe UI',Roboto,sans-serif;
  /* The headline is sized to the metrics of Barlow Condensed. If that font
     does not arrive — an in-app browser that is slow or blocked on
     fonts.gstatic.com — the next name must still be CONDENSED, or the
     one-line headline grows about 30% and the hero band clips it.
     Roboto Condensed is on Android, Avenir Next Condensed on iOS and
     macOS, Arial Narrow on Windows. */
  --disp:'Barlow Condensed','Barlow','Roboto Condensed','Avenir Next Condensed','Arial Narrow',-apple-system,sans-serif;
  --mono:'IBM Plex Mono','SF Mono',Consolas,monospace;
  --shadow:0 4px 18px rgba(10,20,31,.10);
  --shadow-lift:0 12px 32px rgba(10,20,31,.16);
  --radius:12px;
  /* faint plat-line grid, used on dark surfaces */
  --grid:repeating-linear-gradient(0deg,transparent 0 47px,rgba(148,196,232,.07) 47px 48px),
         repeating-linear-gradient(90deg,transparent 0 47px,rgba(148,196,232,.07) 47px 48px);
}
*{box-sizing:border-box;margin:0;padding:0}
/* Netlify injects /.netlify/scripts/hud at its edge, which drops a fixed
   iframe badge at z-index 2147483645 — on a phone it lands straight on top of
   the map's bottom tab bar (owner, 2026-08-27). It is not in our markup, so it
   cannot be deleted from source; hiding the host iframe hides the widget.
   The permanent fix is the Netlify project setting that disables the HUD. */
#nl-badge-frame{display:none!important}
/* Android WebView — which is what Instagram, Facebook and Threads open a
   link in — turns on text auto-inflation by default, unlike Chrome. The
   unprefixed property is the one current Chromium reads; the -webkit-
   name alone left the boost on, which grew the one-line hero headline
   until the hero band cut it off. */
html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;
  scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.5}
a{color:var(--accent-deep)}
img{max-width:100%}
::selection{background:#BFDBFE}

.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* ---------------------------------------------------------------- head -- */
/* THE BAR CARRIES WILLIAMS ENGINEERING'S OWN HEADER PHOTO (owner, 2026-08-27).
   /we-skyline.jpg is the same black-and-white skyline band that sits at the
   top of williamsengineeringgroup.com, taken from that site.

   It is laid under a NAVY SCRIM, and the scrim is not optional. The photo is
   light — pale sky at the top, bright concrete throughout — and this bar sets
   white type on it. Untinted, DAVIDSON COUNTY, the byline, the nav links and
   the ADMIN pill all disappear into the buildings; that was measured against
   the real bar before choosing. The scrim was eased from 82% to 66% (owner,
   2026-08-27: "20% more transparent"), which lets more of the skyline through
   and costs contrast. The measured figures after that change are in the
   README — read them before easing it any further.

   Layer order is top-first: a left-to-right navy wash, then the flat scrim,
   then the photograph, then the solid colour as the floor.

   backdrop-filter is gone with it. The bar used to be 92% opaque and blurred
   what scrolled beneath; it is now fully opaque, so the blur only cost GPU. */
/* --night-soft is brighter inside this bar: easing the scrim to 66% took
   #8FA9BF from 5.0:1 to 2.95:1, under AA. Redefining the token here lifts
   every muted label in the header and nothing below it. */
/* ONE KNOB FOR THE CHROME TINT (owner, 2026-08-27: "85% transparent").
   0.15 opaque is 85% transparent. This is the same token, and the same value,
   as --chrome-veil in map/index.html - one brand, so the two must be changed
   together.

   Measured on this photograph: at .15 the wordmark lands 1.67:1 and the
   sub-line 1.12:1 against AA's 4.5:1, so the type below carries a dark halo to
   stay readable. Raise this to .55 for AA on the wordmark, or .66 - the old
   value - for AA on the sub-line. */
/* THE PHOTOGRAPH IS THE ONLY THING BEHIND THIS HEADER (owner, 2026-08-27:
   "remove the back background ... and make the image behind all heads and tab
   area be 90" - 90% transparent). The left-to-right wash, the navy scrim and
   the solid floor are all gone; the skyline rides on a pseudo-element at .1
   opacity and the page shows through the rest. Same treatment, same value, as
   the map's app bar - one brand, so the two must be changed together. */
/* A WHITE BAR (owner, 2026-08-27), with the photograph on it at 20%. The ink
   tokens are redefined here so everything inside the bar re-inks at once -
   same treatment, same values, as the map's app bar. */
/* THE DARK BAR IS BACK (owner, 2026-08-27) - the original navy-over-skyline.
   The identical stack to .appbar on /map/: one brand, so the two change
   together. The .66 scrim is what keeps the light type readable; every lighter
   value measured put the sub-line under AA. */
/* THE SKYLINE AT 80% TRANSPARENT (owner, 2026-08-27).

   A background-image cannot carry its own alpha, so the photograph moves to a
   pseudo-element at opacity .2 and the bar keeps the wash and the navy floor.
   The children are lifted above it.

   The old flat .66 scrim is gone with it. That scrim existed only to tame a
   full-strength photograph; at 20% the picture no longer needs taming, and
   keeping both would have stacked to roughly 7% of the skyline - effectively
   nothing. The ground is darker than before, so the light type reads better
   rather than worse.

   Owner, 2026-08-27: "barely see the background of the skyline" - .2 still read
   as a photograph, so it drops to .08. Against the navy floor that lifts the
   ground from rgb(10,20,31) to about rgb(21,31,41): the buildings are there if
   you look for them and gone if you do not. Tuning range, measured on this
   photo: .05 is the floor before it disappears entirely, .12 starts reading as
   a picture again. */
.topbar{--night-soft:#C3D3E2;
  position:sticky;top:0;z-index:50;border-bottom:1px solid var(--night-line);
  background:
    linear-gradient(90deg,rgba(14,30,48,.44),rgba(10,20,31,.12)),
    var(--night)}
.topbar::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url(/we-skyline.jpg) center 72%/cover no-repeat;
  opacity:.08}
.topbar > *{position:relative;z-index:1}
/* Owner rule (2026-08-27): this header matches the map's app bar exactly —
   113px tall, a 142x70 mark, and the wordmark at 25.4px with "Filter" in red.
   One brand, so the two must be changed together. */
/* space-between (owner, 2026-09-10): the Williams Engineering byline that
   used to sit between the brand and the nav is gone from every page, and
   with two children left space-evenly floated both toward the middle. The
   brand now holds the left wrap edge and the nav the right — the same
   edges the page content sits on. Pages with a three-zone bar (the home
   page and the account page) add an empty left nav and give both side
   zones flex:1 1 0, which re-centres the brand. */
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;height:170px}
/* 14px, not 10px: the owner asked for more air between each mark and the
   words beside it. .byline uses the same figure. */
.brand{display:flex;align-items:center;gap:18px;text-decoration:none;color:var(--night-ink)}
/* The mark is a plat of parcels with one lot found — /favicon.svg. The old
   "WE" text stays in the markup but is hidden by font-size:0, so one CSS
   rule restyles every page at once. */
/* THE TWO MARKS ARE A MATCHED PAIR (owner, 2026-08-27: "make each logo be the
   same size, same curves, and all"). Same 70px height, same 10px radius, same
   shadow as .byline img. Their widths differ only because the artwork does:
   2.02:1 here against 2.185:1 for Williams Engineering.
   The cyan glow this mark used to carry is gone with the change — a matched
   pair cannot have one member lit and the other not. */
.brandmark{width:142px;height:70px;border-radius:10px;font-size:0;flex:none;
  background:url(/logo.svg) center/contain no-repeat;
  box-shadow:0 2px 10px rgba(4,10,18,.30)}
.brand b{font-size:25.4px;letter-spacing:.2px;color:#fff}
/* Williams Engineering red. The brand's own #781111 measures 1.67:1 on this
   bar and would be unreadable, so this is its established on-dark companion
   at 3.43:1 — the same red the map uses. */
.brand b .fltr{color:#C1392B}
/* align-self:stretch so the account menu, which hangs from `top:100%`, can
   measure the full height of the bar and clear its bottom rule. */
.topnav{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;align-self:stretch}
.topnav a{font-size:18.2px;text-decoration:none;color:var(--night-soft);padding:8px 13px;border-radius:9px}
.topnav a:hover{background:rgba(148,196,232,.12);color:var(--night-ink)}
.topnav a.btn,.topnav a.btn:hover{color:var(--ink);background:var(--paper);border-color:transparent}
.topnav a.btn.primary,.topnav a.btn.primary:hover{color:#fff;
  background:linear-gradient(135deg,#3B82F6,var(--accent-deep));border-color:var(--accent-deep)}

/* ------------------------------------------------- the map, up front -- */
/* THE MAP IS THE PRODUCT (owner, 2026-08-27: "much larger and much more
   visible"). It is deliberately the loudest thing in the bar: 16.5px against
   the 14px of the other links, a lit cyan pill, and a folded-map mark so it
   reads as a destination rather than a word.

   CYAN, not the blue of "Start free", and that is the point — two gradient
   buttons in one bar would fight. The map is the thing to look at; signing up
   is the thing to do next. Cyan also carries the accent used for the account
   avatar and the eyebrow, so it belongs.

   DARK INK ON THE CYAN, never white: #06202E measures 9.3:1 against it, where
   white manages under 2:1.

   The selector is .topnav a.navmap and not .navmap, because .topnav a already
   sets 14px and a muted colour and would otherwise win on specificity. */
.topnav a.navmap{display:inline-flex;align-items:center;gap:12px;
  font:700 21.5px var(--sans);letter-spacing:1.2px;
  padding:13px 20px;border-radius:999px;border:0;
  color:#06202E;background:linear-gradient(135deg,#7DE8F7,#22D3EE 48%,#0EA5E9);
  box-shadow:0 0 22px rgba(34,211,238,.42),0 4px 14px rgba(4,16,28,.35);
  text-decoration:none;
  transition:transform .14s,box-shadow .2s,filter .2s}
.topnav a.navmap:hover{color:#06202E;transform:translateY(-2px);filter:brightness(1.06);
  background:linear-gradient(135deg,#7DE8F7,#22D3EE 48%,#0EA5E9);
  box-shadow:0 0 32px rgba(34,211,238,.62),0 9px 22px rgba(4,16,28,.45)}
.topnav a.navmap:active{transform:translateY(0)}
.topnav a.navmap:focus-visible{outline:2px solid #fff;outline-offset:3px}
.topnav a.navmap .mi{width:25px;height:25px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
@media (prefers-reduced-motion:reduce){
  .topnav a.navmap,.topnav a.navmap:hover{transform:none}
}

/* ======================= the account menu =========================
   Owner rule (2026-08-27): this is the SAME component as the map's app
   bar — initials, name, plan pill, and a menu on click. map.html carries
   its own copy of these rules because it does not load this file.
   ONE BRAND: the two must be changed together.
   Built by paintNav() in site.js. */
.acct{position:relative;flex:none;align-self:stretch;display:flex;align-items:center}

.acct-chip{display:flex;align-items:center;gap:13px;padding:7px 14px 7px 7px;
  border:1px solid transparent;border-radius:999px;background:none;cursor:pointer;
  font-family:var(--sans);color:inherit;transition:background .15s,border-color .15s}
.acct-chip:hover{background:rgba(148,196,232,.10);border-color:rgba(148,196,232,.22)}
.acct-chip[aria-expanded="true"]{background:rgba(148,196,232,.14);
  border-color:rgba(34,211,238,.45)}
.acct-chip:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* Dark ink on the gradient, not white — white on it measures under 2:1. */
.acct-av{flex:none;width:47px;height:47px;border-radius:50%;display:grid;place-items:center;
  font:700 17.5px var(--sans);letter-spacing:.4px;color:#06202E;
  background:linear-gradient(140deg,#7DE8F7,#22D3EE 45%,#2563EB);
  box-shadow:0 0 0 1px rgba(34,211,238,.55),0 0 14px rgba(34,211,238,.30)}

.acct-id{display:flex;flex-direction:column;align-items:flex-start;gap:3px;line-height:1}
.acct-name{font-size:17.5px;font-weight:600;color:#fff;white-space:nowrap}

/* Gold for an admin, cyan for a paying investor, slate for free. Gold and
   not the brand red, because the red already means "ParcelFilter" in the
   wordmark at the other end of the bar. */
.acct-plan{font:700 11.7px var(--mono);letter-spacing:1.5px;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;border:1px solid;white-space:nowrap}
.acct-plan.is-admin{color:#FBBF24;border-color:rgba(251,191,36,.45);background:rgba(251,191,36,.13)}
.acct-plan.is-investor{color:#22D3EE;border-color:rgba(34,211,238,.45);background:rgba(34,211,238,.13)}
.acct-plan.is-free{color:#8FA9BF;border-color:rgba(143,169,191,.35);background:rgba(143,169,191,.10)}

.acct-caret{flex:none;width:14px;height:14px;fill:none;stroke:#8FA9BF;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s,stroke .18s}
.acct-chip[aria-expanded="true"] .acct-caret{transform:rotate(180deg);stroke:var(--cyan)}

.acct-menu{position:absolute;top:calc(100% + 9px);right:0;min-width:252px;padding:6px;z-index:60;
  background:#0F2032;border:1px solid rgba(148,196,232,.20);border-radius:14px;
  box-shadow:0 22px 50px rgba(0,0,0,.55);
  opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;
  transition:opacity .16s ease,transform .16s ease}
.acct-menu.open{opacity:1;transform:none;pointer-events:auto}
.acct-head{display:flex;align-items:center;gap:11px;padding:10px 10px 12px;
  border-bottom:1px solid rgba(148,196,232,.14);margin-bottom:6px}
.acct-head .acct-av{width:42px;height:42px;font-size:16px}
.acct-head b{display:block;font-size:14.5px;font-weight:600;color:#fff;line-height:1.25}
.acct-head em{display:block;font:normal 11.5px var(--mono);color:var(--night-soft);
  max-width:178px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* beats .topnav a, which is 14px and muted */
/* line-height is pinned because body here is 1.5 and the map's is normal;
   without it the same menu is 41px a row on one surface and 36px on the other. */
.topnav .acct-menu a,.acct-menu a{display:flex;align-items:center;gap:11px;
  padding:10px 11px;border-radius:9px;font-size:14px;font-weight:600;line-height:1.2;
  color:var(--night-ink);text-decoration:none}
.topnav .acct-menu a:hover,.acct-menu a:hover{background:rgba(148,196,232,.12);color:#fff}
.acct-menu a svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.acct-rule{height:1px;background:rgba(148,196,232,.14);margin:6px 5px}
.topnav .acct-menu a.danger,.acct-menu a.danger{color:#F87171}
.topnav .acct-menu a.danger:hover,.acct-menu a.danger:hover{background:rgba(248,113,113,.13);color:#FCA5A5}

/* --------------------------------------------------------------- parts -- */
.btn{display:inline-block;border:1px solid var(--line);background:var(--paper);
  border-radius:9px;padding:9px 15px;font:600 14px var(--sans);color:var(--ink);
  cursor:pointer;text-decoration:none;
  transition:background .15s,border-color .15s,transform .12s,box-shadow .15s}
.btn:hover{background:var(--wash);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn.primary{background:linear-gradient(135deg,#3B82F6,var(--accent-deep));
  border-color:var(--accent-deep);color:#fff;box-shadow:0 6px 16px rgba(37,99,235,.30)}
.btn.primary:hover{background:linear-gradient(135deg,#2F74F0,#1E40AF)}
.btn.map{background:linear-gradient(135deg,#EF4444,#B91C1C);
  border-color:#B91C1C;color:#fff;box-shadow:0 6px 16px rgba(185,28,28,.30)}
.btn.map:hover{background:linear-gradient(135deg,#DC2626,#991B1B)}
.btn.map:focus-visible{outline:2px solid #EF4444;outline-offset:2px}
.btn.big{padding:13px 24px;font-size:16px;border-radius:11px}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px;transition:box-shadow .2s,transform .2s,border-color .2s}
a.card{text-decoration:none;color:inherit}
.grid .card:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--accent-deep)}
.eyebrow:before{content:'';display:inline-block;width:16px;height:2px;background:var(--filter);
  vertical-align:3px;margin-right:8px;border-radius:1px}
.mono{font-family:var(--mono)}
.muted{color:var(--ink-soft)}
.tag{display:inline-block;font-family:var(--mono);font-size:11px;padding:2px 9px;
  border-radius:99px;border:1px solid var(--line);color:var(--ink-soft)}
.tag.free{border-color:var(--good);color:var(--good);background:#ECFDF5}
.tag.paid{border-color:var(--policy);color:var(--policy)}

h1,h2{font-family:var(--disp);font-weight:700;letter-spacing:.2px}

/* --------------------------------------------------------------- forms -- */
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:600;letter-spacing:.6px;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px}
.field input{width:100%;border:1px solid var(--line);border-radius:9px;padding:11px 12px;
  font:15px var(--sans);color:var(--ink);outline:none;background:#fff;transition:border-color .15s,box-shadow .15s}
.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.hint{font-size:12px;color:var(--ink-soft);margin-top:5px}
.note{border-radius:9px;padding:10px 12px;font-size:14px;margin-bottom:14px;display:none}
.note.show{display:block}
.note.err{background:#FEF2F2;border:1px solid #FECACA;color:#991B1B}
.note.ok{background:#ECFDF5;border:1px solid #A7F3D0;color:#065F46}

/* --------------------------------------------------------------- table -- */
table.kv{width:100%;border-collapse:collapse;font-size:14px}
table.kv th,table.kv td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}
table.kv th{font-weight:600;color:var(--ink-soft);font-size:12px;letter-spacing:.6px;
  text-transform:uppercase;width:45%}
table.kv td{font-family:var(--mono);font-size:13.5px}

.grid{display:grid;gap:16px}
@media(min-width:760px){ .grid.two{grid-template-columns:1fr 1fr} .grid.three{grid-template-columns:repeat(3,1fr)} }

.ordiv{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--ink-soft);font-size:12px;
  letter-spacing:1px;text-transform:uppercase}
.ordiv:before,.ordiv:after{content:'';flex:1;height:1px;background:var(--line)}

.foot{background:var(--night);color:var(--night-soft);margin-top:64px;padding:30px 0;
  font-size:13px;border-top:1px solid var(--night-line)}
.foot .wrap{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.foot a{color:var(--night-soft)}
.foot .muted{color:var(--night-soft)}

/* The firm's mark in the footer. Its own full-width line above the rest, so
   it reads as a signature rather than as one more footer link - and so it is
   present on a phone, where the header byline is hidden. */
.footwe{display:flex;align-items:center;gap:13px;text-decoration:none;
  flex:1 1 100%;padding-bottom:16px;margin-bottom:2px;
  border-bottom:1px solid var(--night-line)}
.footwe:hover{opacity:.86;text-decoration:none}
.footwe:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
.footwe img{height:54px;width:auto;flex:none;display:block;border-radius:9px;
  box-shadow:0 2px 10px rgba(4,10,18,.30)}
.footwe small{display:block;font-size:11.5px;letter-spacing:.4px;
  color:var(--night-soft);text-transform:uppercase}
.footwe b{display:block;font-size:15.5px;letter-spacing:.2px;color:var(--night-ink);
  line-height:1.35}
@media (max-width:640px){
  .footwe img{height:46px}
  .footwe b{font-size:14.5px}
  .footwe small{font-size:10.5px}
}

/* ---------------------------------------------------- dark hero pieces -- */
.night{background-color:var(--night);background-image:var(--grid);color:var(--night-ink);position:relative}
.night .eyebrow{color:var(--cyan)}
/* Owner rule (2026-08-25): the hero eyebrow reads 1.75× the base size. */
.hero .eyebrow{font-size:19.25px}
.night h1,.night h2{color:#fff}
.night .muted{color:var(--night-soft)}
.statstrip{display:flex;gap:0;flex-wrap:wrap;border:1px solid var(--night-line);
  border-radius:var(--radius);overflow:hidden;background:rgba(15,32,50,.65);backdrop-filter:blur(6px)}
.statstrip .s{flex:1 1 150px;padding:14px 18px;border-right:1px solid var(--night-line)}
.statstrip .s:last-child{border-right:0}
.statstrip b{display:block;font-family:var(--mono);font-size:22px;color:#fff;letter-spacing:-.5px}
.statstrip span{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--night-soft)}

/* Signed-out Sign in link: the person icon only exists for the phone chip
   below; on a desktop the link is text, same as it always was. */
.topnav a.signin .si{display:none}

/* ---------------------------------------------------------- phones -- */
/* Every page except the map, which carries its own mobile rules.
   Three things matter on a handset: nothing may scroll sideways, every
   control must be big enough for a thumb, and a text field must never
   make iOS zoom the page. */

/* iOS zooms the whole page when a focused field is under 16px. */
.field input,.field select,.field textarea{font-size:16px}

/* Notched phones: keep content clear of the rounded corners. */
.wrap{padding-left:max(20px,env(safe-area-inset-left));
      padding-right:max(20px,env(safe-area-inset-right))}

@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .topnav a{min-height:44px;display:inline-flex;align-items:center}
  .brand{min-height:44px}
  /* The chip collapses to its 32px face on a handset, which is under a thumb.
     The padding grows rather than the avatar, so the face keeps its size. */
  .acct-chip{min-width:44px;min-height:44px;justify-content:center}
  .acct-menu a{min-height:44px}
  .foot a{padding:12px 4px;display:inline-block}
  /* A row in a key/value table is often the only thing to tap. */
  table.kv th,table.kv td{padding:12px 10px}
}

@media (max-width:640px){
  /* ONE ROW ON A PHONE (owner, 2026-08-28): the mark, the wordmark, MAP and
     the account chip all ride the same line. Every item is sized in vw
     between a floor and its desktop figure, so the row narrows to fit a
     320px handset instead of breaking in two.

     flex-wrap stays on deliberately, as the safety net for the signed-out
     bar: it carries two extra buttons and cannot hold one line at this
     width, so it keeps the two-row layout rather than being crushed. */
  .topbar .wrap{height:auto;min-height:0;padding-top:10px;padding-bottom:10px;
    flex-wrap:wrap;row-gap:4px;gap:clamp(8px,2.4vw,14px);
    justify-content:space-between}
  .brand{gap:clamp(6px,2.2vw,12px);flex:0 1 auto;min-width:0}
  /* aspect-ratio rather than a second clamp, so the mark cannot drift off
     the 142x70 artwork ratio at any width between 320 and 640. */
  .brandmark{width:clamp(58px,18vw,99px);height:auto;aspect-ratio:142/70}
  .brand b{font-size:clamp(14px,4.4vw,20.8px);white-space:nowrap}
  .topnav{margin-left:auto;gap:6px;flex:none}
  .topnav a{font-size:17.5px;padding:8px 12px}
  /* Still the loudest thing in the bar, but it now shares the line with the
     brand, so it scales with everything else. */
  .topnav a.navmap{font-size:clamp(14px,4.3vw,18.9px);letter-spacing:.6px;
    padding:9px clamp(10px,3.2vw,16px);gap:clamp(5px,1.8vw,8px)}
  .topnav a.navmap .mi{width:clamp(17px,5.4vw,21px);height:clamp(17px,5.4vw,21px)}
  /* SIGNED-OUT MATCHES SIGNED-IN (owner, 2026-09-01): the signed-out bar
     used to carry MAP + Sign in + Start free, which cannot hold one line on
     a phone, so the bar wrapped into a tall second row — and a link opened
     from Instagram (whose in-app browser shares no cookies, so everyone is
     signed out there) looked nothing like the signed-in browser. Now the
     phone bar shows the same three shapes in both states: brand, MAP, one
     42px circle — the account chip when signed in, this sign-in chip when
     not. Start free leaves the bar on phones only, because the hero right
     below opens with a full-width Start free button. */
  .topnav a.btn.primary{display:none}
  .topnav a.signin{width:42px;height:42px;padding:0;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;flex:none;
    border:1.5px solid rgba(148,196,232,.45);color:var(--night-ink)!important}
  .topnav a.signin .si{display:block;width:21px;height:21px;fill:none;
    stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .topnav a.signin span{display:none}

  /* The chip keeps only its face on a handset. The name and the plan are
     both in the menu it opens. */
  .acct-chip{padding:3px;gap:0}
  .acct-chip .acct-id,.acct-chip .acct-caret{display:none}
  .acct-av{width:42px;height:42px;font-size:16.3px}
  .acct-menu{min-width:232px}

  .btn.big{padding:13px 20px;font-size:15.5px}
  /* Full-width buttons read as one clear next step instead of two small ones. */
  .hero .cta{flex-direction:column;align-items:stretch}
  .hero .cta .btn{width:100%}

  /* Owner rule (2026-08-27): the hero eyebrow holds ONE line on phones.
     41 monospace characters at 0.6em each: 3.2vw fits 320px and up, the
     letter-spacing drops from 1.8px because at 41 characters it alone costs
     74px, and the dash goes because it buys nothing at this width. The
     desktop 1.75x rule above 640px is untouched. */
  .hero .eyebrow{white-space:nowrap;font-size:clamp(10px,3.2vw,19.25px);letter-spacing:.4px}
  .hero .eyebrow:before{display:none}

  section{padding:34px 0}
  section h2{font-size:27px}
  .card{padding:18px}
  .statstrip .s{flex:1 1 50%;padding:12px 14px;border-bottom:1px solid var(--night-line)}
  .statstrip b{font-size:19px}
  .foot{margin-top:44px}
  .foot .wrap{gap:10px}
  /* Wide data tables scroll inside themselves, never the page. */
  .scroller{-webkit-overflow-scrolling:touch}
}

@media (max-width:380px){
  /* Sign in / Start free only. The mark and MAP are on the clamps above,
     which already reach their floor here - pinning the mark to a fixed
     width again would undo the one-row fit. */
  .topnav a{font-size:16.9px;padding:8px 9px}
  .statstrip .s{flex:1 1 100%;border-right:0}
}