@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}
: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}
/* Header, matched to the in-app TopBar so the bar looks identical across the whole site. */
.site-head{display:flex;align-items:center;gap:4px;height:66px;padding:0 16px;margin-bottom:8px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(10px);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)}
.brand .beta{margin-left:8px;align-self:center;font:800 9.5px var(--sans);letter-spacing:1px;color:#7A5312;
  background:var(--gold);border-radius:6px;padding:2px 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 legs, .head-cta), the
   tinted "you" pill (.ng-you: Planner, Your offers, Compare offers), 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),var(--accent));padding:11px 18px;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),var(--accent));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);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}
/* The tip: a dark card under the item, centred; at the right end (Feedback, Sign in, the avatar) it hangs from the item's right edge so it never leaves the window. */
.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{--tx:0;left:auto;right:0}
.ng-end .tip::before,.h-av .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}
}
@media(min-width:1800px){
  .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:1799px){.brand .beta{display:none}}
/* The tight band (1320 to 1439): 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). */
@media(min-width:1320px) and (max-width:1439px){
  .brand{margin-right:4px}
  .hnav{gap:4px}
  .nav-pill,.tab{padding:8px 7px}
  .nav-pill::after,.tab::after{left:7px;right:7px}
  .head-cta{padding:0 13px}
  .h-av{margin-left:2px}
}
/* 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:300px;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}
}
@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}
  .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}
  .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(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}
}
@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, and footer links get a tappable box rather than being 17px
     of underlined text wedged between two others. */
  .disc{font-size:14px}
  .site-foot{font-size:14px;padding:22px 16px}
  .foot-links{gap:0 18px}
  .site-foot .foot-links a{display:inline-block;padding:11px 0}
}
.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}
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}
.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}
.site-foot{max-width:calc(var(--w-data) + 2 * var(--w-gutter));margin:0 auto;padding:26px;color:var(--dim);font-size:14px;line-height:1.6;border-top:1px solid var(--line);text-align:center}
.site-foot a{color:var(--accent-ink)}
.site-foot p{margin:0}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 22px}
.foot-links a{display:inline-block;padding:6px 0;font-weight:600}
.foot-tag{margin-top:10px!important;text-wrap:balance}
.foot-note{margin-top:6px!important;max-width:760px;margin-left:auto!important;margin-right:auto!important;text-wrap:pretty}
.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}}