@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/space-grotesk-latin.woff2) format('woff2')}@font-face{font-family:'Unbounded';font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/unbounded-latin.woff2) format('woff2')}@font-face{font-family:'Unbounded Fallback';font-style:normal;font-weight:400;src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('LiberationSans'),local('Roboto'),local('Roboto-Regular');size-adjust:133.16%;ascent-override:74.74%;descent-override:18.42%;line-gap-override:0%;unicode-range:U+20-7E,U+A0-B4,U+B6-FF,U+102,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+300-301,U+303-304,U+308-309,U+323,U+329,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2039-203A,U+2044,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}@font-face{font-family:'Unbounded Fallback';font-style:normal;font-weight:700;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('LiberationSans-Bold'),local('Roboto Bold'),local('Roboto-Bold');size-adjust:131.11%;ascent-override:75.91%;descent-override:18.71%;line-gap-override:0%;unicode-range:U+20-7E,U+A0-B4,U+B6-FF,U+102,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+300-301,U+303-304,U+308-309,U+323,U+329,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2039-203A,U+2044,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}@font-face{font-family:'Unbounded Fallback';font-style:normal;font-weight:900;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('LiberationSans-Bold'),local('Roboto Bold'),local('Roboto-Bold');size-adjust:134.49%;ascent-override:74.01%;descent-override:18.24%;line-gap-override:0%;unicode-range:U+20-7E,U+A0-B4,U+B6-FF,U+102,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+300-301,U+303-304,U+308-309,U+323,U+329,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2039-203A,U+2044,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}@font-face{font-family:'Space Grotesk Fallback';font-style:normal;font-weight:400;src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('LiberationSans'),local('Roboto'),local('Roboto-Regular');size-adjust:109.17%;ascent-override:90.14%;descent-override:26.75%;line-gap-override:0%;unicode-range:U+D,U+20-7E,U+A0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+300-301,U+303-304,U+308-309,U+323,U+2009,U+200B,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2032-2033,U+2039-203A,U+2044,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}@font-face{font-family:'Space Grotesk Fallback';font-style:normal;font-weight:700;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('LiberationSans-Bold'),local('Roboto Bold'),local('Roboto-Bold');size-adjust:101.59%;ascent-override:96.86%;descent-override:28.74%;line-gap-override:0%;unicode-range:U+D,U+20-7E,U+A0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+300-301,U+303-304,U+308-309,U+323,U+2009,U+200B,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2032-2033,U+2039-203A,U+2044,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
.skip-link{position:absolute;left:8px;top:-80px;z-index:1000;background:#073A47;color:#fff;padding:12px 16px;border-radius:8px;font-weight:700;text-decoration:none}.skip-link:focus{top:8px;outline:3px solid #fff;box-shadow:0 0 0 6px #073A47}main:focus{outline:none}
:where(a[href],button,input,select,textarea,summary,[tabindex]):focus-visible{outline-color:#073A47;outline-offset:2px}
:root{--bg:#EAF6F9;--panel:#fff;--panel2:#F1FAFB;--line:#D3E7EC;--ink:#073A47;--dim:#456B77;
  --accent:#0E9BB5;--accent-ink:#08708A;--accent2:#12B0CE;--coral:#FF6E7B;--coral-ink:#C0392F;--stop:#8A1F2C;--bad-wash:#FFE3E6;--gold:#E9B85A;--sea:#08536F;--on-warm:#0B2530;
  /* THE primary button, defined once (look-20): the design kit's .lk-btn. Coral to gold, the dark kit ink on both ends
     (5.9:1 on coral, 8.7:1 on gold; white would be 2.7:1 and 1.8:1). Every primary button reads these four tokens. */
  --btn-primary-bg:linear-gradient(120deg,var(--coral),var(--gold));--btn-primary-ink:var(--on-warm);
  --btn-primary-shadow:inset 0 1.5px 0 rgba(255,255,255,.55),inset 0 -1.5px 0 rgba(120,60,20,.25),0 8px 18px rgba(255,110,123,.35);
  --btn-primary-shadow-hover:inset 0 1.5px 0 rgba(255,255,255,.55),inset 0 -1.5px 0 rgba(120,60,20,.25),0 13px 26px rgba(255,110,123,.45);
  --display:'Unbounded','Unbounded Fallback',system-ui,sans-serif;--sans:'Space Grotesk','Space Grotesk Fallback',system-ui,sans-serif;
  --w-text:708px;--w-data:1028px;--w-gutter:26px}
*{box-sizing:border-box}
html{background-color:#E8F6F9}
body{margin:0;color:var(--ink);font:16px/1.7 var(--sans);
  background:radial-gradient(1100px 640px at 12% -12%,#D6F1F7 0%,transparent 60%),
    radial-gradient(900px 620px at 92% 4%,#FDEFE2 0%,transparent 55%),
    linear-gradient(180deg,#F3FBFC 0%,#E8F6F9 100%);background-attachment:fixed;min-height:100vh}
a{color:var(--accent-ink);text-decoration:none}a:hover{text-decoration:underline}
/* a11yfix1 B10: example text in a box at 5.8:1 (Chrome's own #A9A9A9 is 2.35:1); a page's own rule still wins. */
::placeholder{color:var(--dim);opacity:1}
/* Header, matched to the in-app TopBar so the bar looks identical across the whole site. Solid white, as the finder's in the
   new look (look2.css, HM-38, 6 Nov 2026; ship18: on a phone the pages' headings and port tiles read through the 72 percent
   white behind the logo, in WebKit as on the finder before). */
.site-head{display:flex;align-items:center;gap:4px;height:66px;padding:0 16px;margin-bottom:8px;
  background:#FFFFFF;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:40}
.brand{font:700 17px var(--display);color:var(--ink);display:flex;align-items:center;gap:10px;margin-right:8px;min-height:44px}
.brand:hover{text-decoration:none}
.brand .mark{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-size:18px;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--sea));box-shadow:0 6px 16px rgba(10,110,150,.4)}
/* sweep12 (11 Nov 2026): the tag read 9.5 px; 11 px now (letter spacing .8, padding 1 px), still well inside the 44 px brand row, so the
   header keeps its height. The app's .tb-beta (web/src/styles.css) is the same (hdr1test compares the two bars). */
.brand .beta{margin-left:8px;align-self:center;font:800 11px/1.2 var(--sans);letter-spacing:.8px;color:#6B4206;
  background:var(--gold);border-radius:6px;padding:1px 6px}
.head-cta{font:700 13.5px/1 var(--display);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;
  border:none;border-radius:999px;padding:0 16px;position:relative}
/* look-20: ONE primary button look site-wide, read from the --btn-primary-* tokens (the design kit's .lk-btn): header Plan
   button, hub top box, middle box, end banner and not-found button (the trip page's finder button reads the same tokens in triplook.mjs). Nothing below carries a
   colour of its own, so the buttons cannot drift apart again. */
.head-cta,main .top-cta a.go,main .l2lc a.btn,main .endcta a,main a.nf-cta{background:var(--btn-primary-bg);color:var(--btn-primary-ink);
  box-shadow:var(--btn-primary-shadow);text-decoration:none;white-space:nowrap;font-variant-emoji:text;cursor:pointer;
  transition:translate .5s cubic-bezier(.34,1.56,.64,1),scale .5s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease}
.head-cta:hover,main .top-cta a.go:hover,main .l2lc a.btn:hover,main .endcta a:hover,main a.nf-cta:hover{color:var(--btn-primary-ink);
  box-shadow:var(--btn-primary-shadow-hover);translate:0 -2px;text-decoration:none}
.head-cta:active,main .top-cta a.go:active,main .l2lc a.btn:active,main .endcta a:active,main a.nf-cta:active{translate:0 0;scale:.97;transition-duration:.08s}
main .top-cta a.go,main .l2lc a.btn,main .endcta a,main a.nf-cta{display:inline-block;text-align:center;
  font:700 16px/1.15 var(--display);padding:15px 28px;border-radius:999px;font-variant-emoji:text}
main .l2lc a.btn,main .endcta a{max-width:100%}
@media(max-width:620px){main .top-cta a.go,main .l2lc a.btn,main .endcta a,main a.nf-cta{white-space:normal;text-align:center;font-size:14px;padding:14px 18px;min-height:44px;box-sizing:border-box}}
.ic{flex:0 0 auto;vertical-align:-3px;margin-right:6px}.head-cta .ic{margin-right:0}
/* THE top bar (owner, 11 Oct 2026): one bar on every page, no sideways scroller and no arrow. Everything
   fits on one row from 1320px up (measured 15 Oct 2026: signed in, with Royal Up, the row needs 1,308 px at 13 px type); below that the links
   fold into a Menu button with a dropdown panel. Items, order and tips come from server/navitems.mjs,
   shared with web/src/TopBar.jsx, and the rules below are mirrored there (styles.css, .topbar / .tb-*).
   THE OWNER'S ORDER (12 Oct 2026): right after the logo the one primary button (Find your cruise, .head-cta), the
   tinted "you" pill (.ng-you: Compare two offers, Planner, Your offers; sitelinks1, 5 Nov 2026), the site links on plain ground
   (.ng-site), then at the right end Feedback and Sign in (.ng-end) or the avatar. One hover language for every item: a soft --bg pill fades up
   (160 ms) and a 2 px --accent line slides in under the label (180 ms); keyboard focus paints the same
   plus a ring; the page you are on keeps the line. Every item carries a one-line tip (.tip): a tooltip on
   hover and focus, a subtitle in the phone panel, nothing on a touch screen's hover. prefers-reduced-motion
   keeps every state, drops every move. */
.brand,.h-av,.menu-btn{flex:0 0 auto}
.head-cta{transition:translate .18s ease-out,scale .12s ease-out,box-shadow .18s ease-out}
.hnav{display:flex;align-items:center;flex:1 1 auto;min-width:0;gap:6px}
.ng{display:flex;align-items:center;gap:2px}
.ng-you{padding:4px;border-radius:999px;background:var(--panel2);border:1px solid var(--line)}
.ng-end{margin-left:auto}
.menu-btn{display:none}
.nav-pill,.tab{position:relative;display:inline-flex;align-items:center;gap:7px;font:700 13px/1.35 var(--sans);color:var(--dim);
  padding:8px 10px;border-radius:999px;white-space:nowrap;text-decoration:none;background:transparent;border:0;cursor:pointer;
  transition:color .16s ease-out,background-color .16s ease-out}
.nav-pill::after,.tab::after{content:"";position:absolute;left:10px;right:10px;bottom:4px;height:2px;border-radius:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left center;transition:transform .18s ease-out}
.nav-pill:hover,.tab:hover,.nav-pill:focus-visible,.tab:focus-visible{color:var(--ink);background:var(--bg);text-decoration:none}
/* Sign in stands out like the primary button (owner, 12 Oct 2026): a filled turquoise pill with a key */
.nav-pill.signin{color:#fff;border-radius:999px;background:linear-gradient(120deg,var(--accent-ink),#0A7F95);padding:11px 18px;gap:7px;box-shadow:0 8px 18px rgba(10,115,135,.28);font-family:var(--display)}
.nav-pill.signin::before{content:'🔑';font-size:15px}
.nav-pill.signin::after{display:none}
.nav-pill.signin:hover,.nav-pill.signin:focus-visible{color:#fff;background:linear-gradient(120deg,var(--accent-ink),#0A7F95);translate:0 -2px}
.nav-pill:hover::after,.tab:hover::after,.nav-pill:focus-visible::after,.tab:focus-visible::after,.nav-pill.on::after,.tab.on::after{transform:scaleX(1)}
.nav-pill.on,.tab.on{color:var(--accent-ink);background:var(--bg)}
.nav-pill .ic{display:none;margin:0;color:var(--accent-ink)}
.tab .ic{display:none;margin:0;color:var(--accent-ink)}
.site-head :is(a,button):focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
.h-av{width:40px;height:40px;margin-left:4px;border-radius:50%;display:grid;place-items:center;position:relative;font:800 16px var(--display);color:var(--on-warm);
  background:linear-gradient(135deg,var(--gold),var(--coral));box-shadow:0 4px 12px rgba(233,184,90,.45);transition:box-shadow .16s ease-out}
.h-av:hover,.h-av:focus-visible{text-decoration:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent),0 4px 12px rgba(233,184,90,.45)}
/* The count of saved legs on the Planner: gold with the dark kit ink, as the beta tag. */
.tab .tb-badge{margin-left:2px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--gold);color:#5C3D0C;
  font:800 11.5px/20px var(--sans);text-align:center}
/* gate1 (7 Nov 2026): signed out, Compare two offers and the Planner carry a small gold lock after the name, and their tip a second
   line, "Needs a free sign-in" (navitems.mjs NEEDS_SIGN_IN), gold on the dark card. Mirrored in web/src/styles.css. */
/* On the one-row bar the bare icon, close to the name (at 1400 a 20 px pill pushed the row past the window); a small gold pill in the phone menu. */
.nl-lock{display:inline-grid;place-items:center;flex:0 0 auto;width:12px;height:12px;margin:0 -2px 0 -5px;color:#8A5A0B}
.nl-lock .lk{display:block;flex:0 0 auto;width:16px;height:16px;margin:-2px -4px -2px 0}
.btn-lock{display:inline-block;margin-left:6px;vertical-align:-1px;color:#8A5A0B;line-height:0}
.btn-lock .lk{width:12px;height:12px}
.btn .btn-lock{color:currentColor;opacity:.9}
.gate-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tip-need{display:block;margin-top:3px;color:#F7D38C;font-weight:700}
/* The tip: a dark card under the item, centred; at the right end (More, Feedback, Sign in, the avatar) it hangs from the item's right edge so it never leaves the window.
   More joined them in trk1440 (6 Nov 2026): signed in, Your offers and the Planner count push More right, and its centred 314 px
   tip, hidden but still laid out, ran past the window (1453 px at 1440, 1365 at 1360), so the page scrolled sideways. */
.tip{--tx:-50%;position:absolute;top:calc(100% + 9px);left:50%;translate:var(--tx) -4px;z-index:50;pointer-events:none;opacity:0;visibility:hidden;
  font:600 13px/1.35 var(--sans);color:#fff;background:var(--ink);padding:8px 12px;border-radius:10px;white-space:nowrap;letter-spacing:0;text-transform:none;
  box-shadow:0 10px 24px rgba(7,58,71,.28);transition:opacity .15s ease-out,translate .15s ease-out,visibility 0s linear .15s}
.tip::before{content:"";position:absolute;top:-4px;left:50%;width:10px;height:10px;background:var(--ink);translate:-50% 0;rotate:45deg;border-radius:2px}
.ng-end .tip,.h-av .tip,.more-btn>.tip{--tx:0;left:auto;right:0}
.ng-end .tip::before,.h-av .tip::before,.more-btn>.tip::before{left:auto;right:16px;translate:0 0}
:is(.nav-pill,.tab,.h-av,.head-cta):hover>.tip{opacity:1;visibility:visible;translate:var(--tx) 0;transition-delay:.35s,.35s,0s}
:is(.nav-pill,.tab,.h-av,.head-cta):focus-visible>.tip{opacity:1;visibility:visible;translate:var(--tx) 0;transition-delay:0s}
@media(hover:none){.site-head .tip{display:none}}
@media(prefers-reduced-motion:reduce){
  .nav-pill,.tab,.nav-pill::after,.tab::after,.h-av,.head-cta,.tip{transition:none}
  .head-cta:hover,.head-cta:active{translate:0 0;scale:1}
}
/* The roomy bar starts at 1990, not 1800 (hdr1, 6 Nov 2026: the app's ux12 rules of 20 Oct, copied with the same breakpoints).
   With the More links at 16 px from 1800 it needs about 1,990 px of window; from 1800 to 1989 it ran 20 to 29 px past the
   window and cut off Sign in or Feedback, so 1800 to 1989 keeps the normal bar, as the app does. */
@media(min-width:1990px){
  .site-head{gap:10px;padding:0 26px}
  .brand{font-size:20px;margin-right:16px}
  .nav-pill .ic{display:inline-block}
  .nav-pill,.tab{font-size:14px;padding:9px 13px}
  .nav-pill::after,.tab::after{left:13px;right:13px}
  .ng{gap:4px}
  .hnav{gap:10px}
  .h-av{width:42px;height:42px;font-size:17px}
  .head-cta{min-height:42px;padding:0 22px;font-size:14px}
}
@media(max-width:1989px){.brand .beta{display:none}}
/* The tight band (1320 to 1479): eleven things on one row at 13 px with nothing under 13 px, so the air
   between them gives a little instead (measured in the app: 1,284 px needed at the normal spacing, about 1,230 here).
   hdr1: to 1479 as in the app (it stopped at 1439 here, and signed in Feedback ran under the avatar at 1440). */
@media(min-width:1320px) and (max-width:1479px){
  .brand{margin-right:4px}
  .hnav{gap:4px}
  .nav-pill,.tab{padding:8px 7px}
  .nav-pill::after,.tab::after{left:7px;right:7px}
  .nav-pill.on,.tab.on{box-shadow:0 0 0 4px var(--bg)}   /* pillfix1: the fill reaches 4 px past the tab, so the word keeps 11 px of it a side */
  .head-cta{padding:0 13px}
  .h-av{margin-left:2px}
}
/* The lowest part of the band, 1320 to 1399 (the app's ux12 rule, copied in hdr1): at the band's spacing the row still ran
   past the window (41 px signed out at 1320, 38 signed in with the Planner count), so the air gives a little more. The
   button's icon sits 5 px from its words (here a gap; the app sets the same 5 px as the icon's margin). At 1320 itself, signed
   in with a two-digit Planner count, Feedback still ended 13 px under the avatar in both bars, so the bar's own edges give
   6 px a side, the "you" pill 2 px a side and the avatar its 2 px margin (18 px; mirrored in web/src/styles.css). */
@media(min-width:1320px) and (max-width:1399px){
  .site-head{padding-left:10px;padding-right:10px}
  .hnav{gap:2px}
  .ng{gap:0}
  .ng-you{padding:4px 2px}
  .nav-pill,.tab{padding:8px 4px;gap:5px}
  .nav-pill::after,.tab::after{left:4px;right:4px}
  .nav-pill.on,.tab.on{box-shadow:0 0 0 6px var(--bg)}
  .head-cta{padding:0 10px;gap:5px}
  .h-av{margin-left:0}
  .nl-lock{margin-left:-3px}
}
/* sweep9 finding 14 (24 Oct 2026): four plain site links and a More button, so the wide bar reads at 15 px (16 px from
   1800) instead of eleven items at 13 px. More opens a small list under it (a tap, Enter or Space; Escape or a tap elsewhere
   closes it); each item there shows its tip under its name. Mirrors web/src/styles.css (.tb-more). In the narrow panel
   (below 1320) the button hides and the three items are listed in place. */
.nav-more{position:relative;display:flex}
.more-car{width:6px;height:6px;margin:-3px 0 0 1px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;rotate:45deg;transition:rotate .15s ease-out}
.nav-more.open .more-car{rotate:-135deg;margin-top:3px}
.nav-more.open .more-btn>.tip{display:none}
@media(min-width:1320px){
  .hnav-more :is(.nav-pill,.tab){font-size:15px}
  .hnav-more .head-cta{font-size:15px}
  .more-list{display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:60;width:320px;flex-direction:column;align-items:stretch;gap:2px;
    padding:8px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 30px rgba(8,60,80,.16)}
  .nav-more.open .more-list{display:flex}
  .more-list .nav-pill{display:grid;grid-template-columns:22px minmax(0,1fr);grid-template-areas:"ic t" "ic d";column-gap:10px;row-gap:2px;
    align-items:center;white-space:normal;padding:10px 12px;border-radius:10px;text-align:left}
  .more-list .nav-pill::after{display:none}
  .more-list .nav-pill>.ic{grid-area:ic;display:block;width:20px;height:20px;margin:0;align-self:start}
  .more-list .nl-t{grid-area:t}
  .site-head .more-list .nav-pill>.tip{--tx:0;grid-area:d;position:static;display:block;translate:none;opacity:1;visibility:visible;transition:none;
    background:none;box-shadow:none;padding:0;border-radius:0;color:var(--dim);font:500 13.5px/1.35 var(--sans);white-space:normal;text-align:left}
  .more-list .tip::before{display:none}
}
@media(min-width:1800px){
  .hnav-more :is(.nav-pill,.tab){font-size:16px}
  .hnav-more .head-cta{font-size:16px}
}
/* hdr1: these two steps (15 px from 1320, 16 from 1800) stay where they were; the roomy spacing above starts at 1990. */
/* nav1 (6 Nov 2026): two groups, Learn and More (navitems.mjs NAV_GROUPS), each its own button and list; Port guides is on the row at
   every width. The group headings (.nav-gh: Explore, Learn, More) show only in the narrow panel. On the wide bar's list a thin line
   sits above Home ports, where the tools end (.nav-rule). Mirrored in web/src/styles.css (.tb-gh, .tb-rule). */
.nav-gh{display:none;margin:0}
@media(min-width:1320px){
  .more-list .nav-pill.nav-rule{margin-top:7px}
  .more-list .nav-pill.nav-rule::before{content:"";position:absolute;left:12px;right:12px;top:-5px;height:1px;background:var(--line)}
}
@media(prefers-reduced-motion:reduce){.more-car{transition:none}}
/* Narrow windows, tablets and phones: brand, avatar and a Menu button. The groups live in a dropdown
   panel under the bar in the same order: Find legs on top, the tinted "you" block, the site links, then
   Feedback and Sign in at the bottom. One row at every width, so the bar is sticky everywhere.
   THE PANEL IS ONE LIST (owner, 15 Oct 2026: at about 640 px the text ran off the screen and the rows looked
   misaligned). Every row, Find legs and Sign in included, is the same grid across the full width of the panel:
   a fixed 22 px icon column, then the title with its one-line explanation stacked under it, both wrapping. The
   tooltip's hover rules (centring by translate -50%) must not reach the explanation here: they slid its words
   half their width off the left edge. Mirrors web/src/styles.css; menuwidthtest.mjs measures both. */
@media(max-width:1319px){
  .site-head{height:60px;padding:0 16px;gap:10px}
  .brand{margin-right:auto}
  .h-av{width:42px;height:42px;font-size:17px;margin:0}
  .menu-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:11px;
    background:#fff;border:1.5px solid var(--line);color:var(--ink);font:700 14px var(--sans);cursor:pointer}
  .menu-btn:hover,.site-head.open .menu-btn{border-color:var(--accent-ink);color:var(--accent-ink)}
  .menu-btn .ic{margin:0}
  .hnav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:6px;
    padding:12px 16px 16px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 18px 30px rgba(8,60,80,.16);
    max-height:calc(100vh - 60px);max-height:calc(100dvh - 60px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
  .site-head.open .hnav{display:flex}
  .ng{flex-direction:column;align-items:stretch;gap:2px}
  .ng-you{margin-top:2px;padding:4px 0;border:0;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line)}
  .ng-site{margin-top:2px}
  .nav-more,.more-list{display:contents}
  .hnav .nav-pill.more-btn{display:none}
  /* nav1: a small heading over each group (Explore, Learn, More), level with the rows' icons. */
  .hnav .nav-gh{display:block;margin:10px 0 0;padding:6px 14px 2px;font:800 12.5px/1.3 var(--sans);letter-spacing:1.2px;text-transform:uppercase;color:#0A6E82}
  .ng-end{margin:4px 0 0;padding-top:10px;border-top:1px solid var(--line);gap:8px}
  .hnav :is(.head-cta,.tab,.nav-pill){display:grid;grid-template-columns:22px minmax(0,max-content) minmax(0,1fr);grid-template-areas:"ic t b" "ic d d";
    column-gap:12px;row-gap:2px;align-items:center;justify-items:start;align-content:center;
    width:100%;min-width:0;min-height:52px;margin:0;padding:10px 14px;border:0;border-radius:12px;box-sizing:border-box;
    text-align:left;white-space:normal;font:700 16px/1.3 var(--sans)}
  .hnav :is(.head-cta,.tab,.nav-pill)::after{display:none}
  .hnav :is(.head-cta,.tab,.nav-pill)>.ic{grid-area:ic;display:block;width:20px;height:20px;margin:0;justify-self:center;align-self:start}
  .hnav :is(.nl-t,.cta-t){grid-area:t;min-width:0;overflow-wrap:anywhere}
  .hnav .tb-badge{grid-area:b;margin:0 0 0 -4px}
  .hnav .nl-lock{grid-area:b;width:26px;height:26px;margin:-3px 0 -3px -4px;border-radius:999px;background:#FFF1D6;box-shadow:inset 0 0 0 1px #EFD39A}
  .hnav .nl-lock .lk{width:14px;height:14px;margin:0}
  .site-head .hnav .tip .tip-need{margin-top:2px;color:#8A5A0B;font-weight:700}
  .site-head .hnav :is(.head-cta,.tab,.nav-pill)>.tip{grid-area:d;position:static;display:block;width:auto;max-width:100%;min-width:0;
    translate:none;opacity:1;visibility:visible;transition:none;background:none;box-shadow:none;padding:0;border-radius:0;
    color:var(--dim);font:500 13.5px/1.35 var(--sans);white-space:normal;overflow-wrap:anywhere;text-align:left}
  .hnav .tip::before{display:none}
  .hnav .head-cta{font:700 16px/1.3 var(--display)}
  .site-head .hnav .head-cta>.tip{color:var(--on-warm);font-weight:600}
  .hnav .head-cta:is(:hover,:focus-visible,:active),.hnav .nav-pill.signin:is(:hover,:focus-visible){translate:none;scale:none}
  .hnav .nav-pill.signin{font:700 16px/1.3 var(--display);color:#fff;background:linear-gradient(120deg,#075E73,#0A7387);box-shadow:0 8px 18px rgba(10,115,135,.24)}
  .hnav .nav-pill.signin::before{grid-area:ic;justify-self:center;align-self:start;font-size:16px;line-height:20.8px}
  .site-head .hnav .nav-pill.signin>.tip{color:#E3F5F9}
  .site-head .hnav .nav-pill.signin:is(:hover,:focus-visible){color:#fff;background:linear-gradient(120deg,#064F61,#086577)}
  /* The avatar sits in the bar here, not in the panel: its hidden tooltip would still count toward the
     page's scroll width (measured 425 px on a 390 px phone), so it has none. */
  .h-av .tip{display:none}
}
@media(min-width:600px) and (max-width:1319px){
  /* findleft (7 Nov 2026): on a tablet the one long list (21 rows, 1431 px) ran past the screen. The three site groups (Explore,
     Learn, More) sit side by side instead: two columns from 600 px, three from 700 px, a group never split between columns. */
  .ng-site{display:block;column-count:2;column-gap:20px}
  .ng-site .nav-more{display:block;break-inside:avoid}
  .ng-site .nav-gh{margin-top:0}
  .ng-site .nav-pill{break-inside:avoid}
  /* auditfix2 hid the Price Check email's explanation here to keep Learn short; ship20 shows it again (menuwidthtest: every row
     shows its explanation) and keeps the panel short with the side by side rows below instead. */
  /* ship20 (HM-39, 7 Nov 2026): the "you" rows (Compare two offers, Planner, Your offers) and the end rows (Feedback, Sign in)
     stand side by side too, on the same columns as the groups (same gap, equal widths), so the open menu is no long scroll
     (at 600 px it was 1211 px tall, 1178 at 699, after pillfix1's roomier rows and auditfix2's Price Check email in Learn). */
  .ng-you,.ng-end{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;align-items:start}
  /* ...and each row 4 px less padding top and bottom (still a 48 px tap target), so 700 px with its narrow columns fits too. */
  .hnav :is(.head-cta,.tab,.nav-pill){min-height:48px;padding-top:8px;padding-bottom:8px}
}
@media(min-width:700px) and (max-width:1319px){.ng-site{column-count:3}.ng-you,.ng-end{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* signed out the "you" rows are two (Compare two offers, Planner): the first takes two columns, so its title and lock are not
     squeezed into a third of 700 px; the second sits on the third column, where the More group starts */
  .ng-you>:first-child:nth-last-child(2){grid-column:span 2}}
@media(max-width:600px){
  .site-head{padding:0 12px;gap:8px}
  .hnav{padding:10px 12px 14px}
  .brand{font-size:15px;gap:7px}
  .brand .mark{width:30px;height:30px;font-size:15px}
  .h-av{width:34px;height:34px;font-size:14px}
  /* sweep12: the 34 px avatar answers a 44 px finger (as the app's .tb-av, styles.css phone14); it does not grow */
  .h-av::after{content:"";position:absolute;inset:-5px}
}
@media(max-width:420px){
  .brand{font-size:14px;gap:6px}
  .brand .mark{width:28px;height:28px;font-size:14px}
  .menu-txt{display:none}
  .menu-btn{padding:0 11px}
}
@media(max-width:600px){
  .wrap{padding:8px 16px 60px}
  /* Nothing under 12px on a phone (the footer's own phone rules are in server/sitefoot.css). */
  .disc{font-size:14px}
}
.wrap{max-width:calc(var(--w-text) + 2 * var(--w-gutter));margin:0 auto;padding:8px 26px 70px}
.wrap.wide{max-width:calc(var(--w-data) + 2 * var(--w-gutter))}
/* Drawn on big monitors only (wide.mjs): a contents list or related links beside a page of text. */
.rail{display:none}
.crumb{font-size:14px;color:var(--dim);margin:10px 0 20px}
/* sweep6: a breadcrumb link is 17-19px of text; its tap box is 44px tall (padding cancelled by margin, so the line does not grow) */
.crumb a,.crumbs a{display:inline-block;padding:13px 0;margin:-13px 0}
/* auditfix2: a crumb now starts with Home and can run onto a second line on a phone; the words of that line (the page's own name,
   painted after the link) took the bottom of Home's tap box (36 px). Lifted, the link's box is whole again. */
.crumb a,.crumbs a{position:relative}
h1{font:900 40px/1.1 var(--display);letter-spacing:-.5px;margin:6px 0 14px}
.dek{font-size:20px;color:var(--sea);font-weight:500;margin:0 0 22px;text-wrap:pretty}
.endcta{margin:44px 0 0;padding:26px;border-radius:18px;text-align:center;background:linear-gradient(135deg,#0C7F96,#08536F);color:#fff}
.endcta h3{font:900 24px var(--display);margin:0 0 8px}
/* main p is capped at 90ch and sits at the left of its box: centre the box too, or on a wide screen the sentence drifts off the heading's axis. */
.endcta p{color:#fff;font-weight:600;margin:0 auto 16px;font-size:15px}
.endcta a{display:inline-block;background:#fff;color:var(--sea);font-weight:800;font-size:15px;padding:12px 26px;border-radius:12px}
.endcta a:hover{text-decoration:none;background:#F1FAFB}
.l2lc{margin:26px 0;padding:20px 22px;border-radius:16px;border:1.5px solid var(--accent);background:linear-gradient(180deg,#F2FBFD,#EAF6F9)}
.l2lc .k{font:700 13px var(--sans);letter-spacing:.6px;text-transform:uppercase;color:var(--accent-ink)}
.l2lc h3,.l2lc h2{font:800 19px var(--display);margin:6px 0 8px;color:var(--ink)}
.lb-links{margin:8px 0 0;padding-left:22px;line-height:1.7;font-size:17px}
.l2lc p{font-size:15px;color:var(--sea);margin:0 0 14px}
.l2lc a.btn{display:inline-block;background:var(--accent);color:#fff;font-weight:700;font-size:14px;padding:10px 18px;border-radius:10px}
.l2lc a.btn:hover{background:var(--accent2);text-decoration:none}
.disc{font-size:14px;color:var(--dim);margin-top:34px;padding-top:16px;border-top:1px solid var(--line);line-height:1.6}
/* THE footer (nav1, 6 Nov 2026): one footer on every page, the app's too. Its look is server/sitefoot.css, shared with the app;
   here only the box it sits in: the whole width of the window, at the bottom of the page. */
.site-foot{width:100%;margin:0;padding:0;border:0}
.sf{--sf-w: 1180px;--sf-g: 26px;background: linear-gradient(180deg,#075A7C,#063E56);color: #CFEAF2;font: 500 15px/1.5 var(--sans);text-align: left;box-shadow: 0 100vh 0 100vh #063E56;}.sf-in{max-width: calc(var(--sf-w) + 2 * var(--sf-g));margin: 0 auto;box-sizing: border-box;padding: 46px var(--sf-g) 30px;display: grid;grid-template-columns: minmax(220px,1fr) minmax(0,3.4fr);grid-template-areas: "brand cols" "base base";column-gap: 48px;row-gap: 34px;}.sf p{margin: 0;max-width: none;}.sf .nb{white-space: nowrap;}.sf a{color: #E3F4F8;text-decoration: none;}.sf a:hover{color: #FFD98A;text-decoration: underline;text-underline-offset: 3px;}.sf a:focus-visible{outline: 2px solid #FFD98A;outline-offset: 2px;border-radius: 3px;}.sf-brandcol{grid-area: brand;min-width: 0;}.sf .sf-brand{display: inline-flex;align-items: center;gap: 10px;min-height: 44px;font: 700 19px/1.2 var(--display);color: #fff;}.sf .sf-brand:hover{color: #fff;}.sf-mark{display: grid;place-items: center;width: 34px;height: 34px;border-radius: 11px;font-size: 17px;color: #fff;background: linear-gradient(135deg,#0E9BB5,#08536F);box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);}.sf .foot-tag{margin-top: 8px;max-width: 30ch;font-size: 14.5px;line-height: 1.5;color: #B8D8E3;text-wrap: pretty;}.sf .foot-links{grid-area: cols;display: grid;grid-template-columns: repeat(4,minmax(0,1fr));column-gap: 28px;row-gap: 26px;min-width: 0;}.sf-col{min-width: 0;}.sf-h{font: 800 13px/1.3 var(--display);letter-spacing: 1.3px;text-transform: uppercase;color: #FFD98A;margin: 0 0 10px;}.sf-col ul{list-style: none;margin: 0;padding: 0;}.sf-col li{margin: 0;max-width: none;}.sf-col a{display: inline-block;padding: 5px 0;font-weight: 600;font-size: 15px;line-height: 1.35;}.sf-base{grid-area: base;border-top: 1px solid rgba(207,234,242,.18);padding-top: 18px;display: grid;gap: 6px;}.sf .foot-note,.sf .foot-legal{font-size: 13.5px;line-height: 1.55;color: #B8D8E3;max-width: 40em;text-wrap: pretty;}.sf .foot-note a{color: #FFD98A;text-decoration: underline;text-underline-offset: 2px;}@media (min-width: 1100px){.sf-base{grid-template-columns: minmax(0,1fr) minmax(0,1fr);column-gap: 48px;align-items: start;}}@media (min-width: 1500px){.sf{--sf-w: 1700px;}.sf-in{column-gap: 64px;}}@media (min-width: 1500px){.sf-h{font-size: 14px;}.sf .foot-note,.sf .foot-legal{font-size: 14px;}}@media (min-width: 1760px){.sf{--sf-w: 2200px;}}@media (min-width: 2200px){.sf-in{padding-top: 58px;padding-bottom: 38px;grid-template-columns: minmax(320px,1fr) minmax(0,3.6fr);column-gap: 96px;}.sf .sf-brand{font-size: 22px;}.sf .foot-tag{font-size: 16.5px;}.sf-h{font-size: 14px;margin-bottom: 12px;}.sf-col a{font-size: 17px;padding: 6px 0;}.sf .foot-note,.sf .foot-legal{font-size: 15.5px;}}@media (max-width: 1099px){.sf-in{grid-template-columns: minmax(0,1fr);grid-template-areas: "brand" "cols" "base";row-gap: 26px;padding-top: 36px;}.sf .foot-tag{max-width: none;}}@media (max-width: 699px){.sf{--sf-g: 16px;}.sf-in{padding-top: 28px;padding-bottom: 26px;row-gap: 20px;}.sf .foot-links{grid-template-columns: repeat(2,minmax(0,1fr));column-gap: 18px;row-gap: 18px;}.sf-h{margin-bottom: 2px;}.sf-col a{display: block;padding: 12.5px 0;font-size: 15.5px;overflow-wrap: anywhere;}.sf .foot-note,.sf .foot-legal{font-size: 14px;}}@media (max-width: 340px){.sf .foot-links{grid-template-columns: minmax(0,1fr);}}@media (max-width: 329px){.sf .sf-brand{font-size: 17px;gap: 8px;}}
.nb{white-space:nowrap}
main p,main li,main dd{max-width:90ch}
h1,h2,h3{text-wrap:balance}
@media(max-width:720px){h1{font-size:30px}}