/*
 * Sneaky site footer V3, "One connected journey" (footer/v3/v3.php). It replaces footer/assets/footer.css while V3 serves.
 * Every rule is scoped to the .shf root; no --sh-* token is defined. The wordmark, its line, its one-time grow and the
 * social icons are V2's rules, copied unchanged (approved, owner brief of 24 October 2026).
 * Motion: nothing loops. The light crosses the top rule and lights the Journey Constellation as the visitor scrolls in
 * (footer-v3.js adds .shf3-live only when motion is welcome); hover and focus answer once. Without the script, or with
 * reduced motion, everything is simply there, fully lit.
 * Breakpoints: 400, 768 and 1024.
 */

@font-face {
	font-family: "Sneaky Display";
	src: url("../../../home/assets/fonts/bricolage-grotesque-latin-var.woff2") format("woff2");
	font-weight: 700 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.shf {
	--shf-head: #f2f8fb;
	--shf-link: #e8f1f5;
	--shf-soft: #b4c8d4;
	--shf-sky: #6ec4e8;
	--shf-sky-text: #8fd3ef;
	--shf-quiet: #8fa9b8;
	--shf-display: "Sneaky Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--shf-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--shf-gutter: clamp(16px, 4vw, 48px);
	--shf-ease: cubic-bezier(.2, .7, .2, 1);
	--shf-pop: cubic-bezier(.34, 1.56, .64, 1);
	--shf-thread: linear-gradient(90deg, #3fb39d, #4ea6ec 36%, #5cb860 63%, #ec6a98);
	/* the floating utilities (Help Me, Ask a Helper, the Favorites heart; public-ab's measurements, 24 Oct 2026): the
	   bottom bar keeps its links out from under them. Desktop: 192px wide at full scroll, 280px while Help Me unfolds
	   on hover; phones: 178 x 70px. */
	--shf-clear-x: 280px;
	--shf-clear-y: 88px;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	overflow: clip;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	color: #c3d4dd;
	font: 400 16px/1.6 var(--shf-body);
	-webkit-font-smoothing: antialiased;
	background:
		radial-gradient(42% 70% at 6% 12%, rgba(36, 107, 95, .36), rgba(36, 107, 95, 0) 70%),
		radial-gradient(36% 60% at 96% 24%, rgba(110, 196, 232, .14), rgba(110, 196, 232, 0) 70%),
		linear-gradient(180deg, #0f2230 0%, #0c1d29 100%);
}
.shf, .shf *, .shf *::before, .shf *::after { box-sizing: border-box; }
.shf :where(h2, p, ul, ol, li) { margin: 0; padding: 0; }
.shf :where(ul, ol) { list-style: none; }
/* Keep keyboard-scrolled links clear of the fixed header and bottom utilities. */
.shf a, .shf button { scroll-margin-block: 100px; }
/* the dots: a quiet field behind the constellation */
.shf::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .075) 1.1px, rgba(255, 255, 255, 0) 1.7px); background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(46% 42% at 70% 74%, #000 20%, transparent 75%); mask-image: radial-gradient(46% 42% at 70% 74%, #000 20%, transparent 75%); }
.shf a:focus-visible, .shf button:focus-visible { outline: 2px solid #ffcf33; outline-offset: 3px; box-shadow: none; }

/* ---------- the journey's line closes the page: the page's thread lands on this rule, and the light carries on ---------- */
.shf::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #3fb39d, #6ec4e8 33%, #4ea6ec 66%, #ec6a98); }
.shf .shf3-relay { position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 4px; pointer-events: none; opacity: 0; transform: translate3d(-100%, 0, 0); }
.shf .shf3-relay-bead { position: absolute; right: -10px; top: -5px; width: 220px; height: 14px; border-radius: 14px;
	background: radial-gradient(closest-side at 92% 50%, #fff 0, rgba(255, 255, 255, .85) 22%, rgba(143, 211, 239, .5) 48%, rgba(143, 211, 239, 0) 100%), linear-gradient(90deg, rgba(143, 211, 239, 0), rgba(143, 211, 239, .45) 82%, rgba(143, 211, 239, 0)); }

/* ---------- the columns: brand, Explore, the journey ---------- */
.shf .shf-inner.shf3 { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "explore" "journey"; gap: 40px; width: min(1240px, 100% - 2 * var(--shf-gutter)); margin: 0 auto; padding: clamp(48px, 6vw, 80px) 0 clamp(40px, 5vw, 60px); }
.shf .shf3 > .shf-brand { grid-area: brand; min-width: 0; }
.shf .shf3 > .shf3-explore { grid-area: explore; min-width: 0; }
.shf .shf3 > .shf3-journey { grid-area: journey; min-width: 0; }

/* ---------- brand (V2's wordmark, line and social icons, unchanged) ---------- */
.shf .shf-mark { display: inline-flex; flex-direction: column; align-items: flex-start; color: var(--shf-head); text-decoration: none; font: 800 clamp(34px, 3.4vw, 46px)/.98 var(--shf-display); letter-spacing: -0.035em; }
.shf .shf-mark:hover { color: #fff; }
.shf .shf-squig { display: block; align-self: flex-end; width: 3.3em; height: auto; aspect-ratio: 100 / 12; margin-top: .1em; overflow: visible; }
.shf .shf-squig path { fill: none; stroke: #6ec4e8; stroke-width: 3; stroke-linecap: round; }
.shf .shf-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.shf .shf-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05); color: var(--shf-link); text-decoration: none; transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s var(--shf-ease); }
.shf .shf-social a:hover, .shf .shf-social a:focus-visible { background: var(--shf-sky); border-color: var(--shf-sky); color: #0b1c26; transform: translateY(-2px); }
.shf .shf-social svg { width: 19px; height: 19px; }

/* the brand lines: four short sentences, each verb in its pillar's colour, breaking only between sentences */
.shf .shf3-tag { max-width: 44ch; margin-top: 18px; color: var(--shf-soft); font: 400 16px/1.6 var(--shf-body); }
.shf .shf3-say { white-space: nowrap; }
.shf .shf3-say b { font-weight: 700; color: var(--say, var(--shf-link)); }
.shf .shf3-say--assess { --say: #3fb39d; }
.shf .shf3-say--train { --say: #4ea6ec; }
.shf .shf3-say--eat { --say: #5cb860; }
.shf .shf3-say--help { --say: #ec6a98; }
.shf .shf3-sign { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: var(--shf-sky-text); font: 600 15px/1.45 var(--shf-body); }
.shf .shf3-sign::before { content: ""; flex: none; width: 26px; height: 2px; border-radius: 2px; background: var(--shf-thread); }

/* About · Contact: part of the brand, small and calm */
.shf .shf3-meta { display: flex; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.shf .shf3-meta > li { display: inline-flex; align-items: center; }
.shf .shf3-meta > li + li::before { content: ""; flex: none; width: 4px; height: 4px; margin: 0 12px; border-radius: 50%; background: rgba(143, 211, 239, .6); }

/* ---------- links (Explore, About, Contact, Explore more) ---------- */
.shf .shf-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--shf-link); font: 600 16px/1.3 var(--shf-body); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 6px; transition: color .16s ease, text-decoration-color .16s ease; }
.shf .shf-link:hover, .shf .shf-link:focus-visible { color: #fff; text-decoration-color: var(--shf-sky); }
.shf .shf3-meta .shf-link { min-height: 40px; font-size: 15px; }

/* Explore: each area in its colour, as on the homepage; Think (the sister site) is a ring with its arrow */
.shf .shf-h { display: flex; align-items: center; min-height: 44px; margin: 0 0 4px; font: 800 13px/1.2 var(--shf-body); letter-spacing: .14em; text-transform: uppercase; color: var(--shf-sky-text); }
.shf .shf3-explore ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; justify-items: start; }
.shf .shf-link--assess, .shf .shf-link--train, .shf .shf-link--eat, .shf .shf-link--helpers, .shf .shf-link--learn, .shf .shf-link--think { --dot: #3fb39d; }
.shf .shf-link--train { --dot: #4ea6ec; }
.shf .shf-link--eat { --dot: #5cb860; }
.shf .shf-link--helpers { --dot: #ec6a98; }
.shf .shf-link--learn { --dot: #e0a33a; }
.shf .shf-link--assess::before, .shf .shf-link--train::before, .shf .shf-link--eat::before, .shf .shf-link--helpers::before, .shf .shf-link--learn::before, .shf .shf-link--think::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--dot); }
.shf .shf-link--think::before { background: transparent; border: 1.5px solid #c9c2b2; }
.shf .shf-ext { margin-left: -4px; font-size: .85em; opacity: .8; }

/* ---------- the journey: its title, the two small utilities, the constellation, the closing line ---------- */
.shf .shf3-jhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.shf .shf3-jk { min-width: 0; font: 800 13px/1.2 var(--shf-body); letter-spacing: .14em; text-transform: uppercase; color: var(--shf-sky-text); }
.shf .shf3-util { display: flex; flex: none; gap: 8px; }
.shf .shf3-ub { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05); color: var(--shf-link); text-decoration: none; transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s var(--shf-ease); }
.shf .shf3-ub .shf3-i { width: 20px; height: 20px; }
.shf .shf3-ub:hover, .shf .shf3-ub:focus-visible { background: var(--shf-sky); border-color: var(--shf-sky); color: #0b1c26; transform: translateY(-2px); }
/* signed in: a small teal light on the account icon */
.shf .shf3-ub--account.is-in::before { content: ""; position: absolute; top: 0; right: 0; width: 11px; height: 11px; border-radius: 50%; background: #3fb39d; box-shadow: 0 0 0 2.5px #0f2230; }
/* the word, on hover and focus (the link's name is its aria-label) */
.shf .shf3-ub::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); right: 0; padding: 5px 10px; border-radius: 8px; background: #f2f8fb; color: #0f2230; font: 700 12.5px/1.2 var(--shf-body); letter-spacing: 0; white-space: nowrap; opacity: 0; transform: translateY(-3px); pointer-events: none; transition: opacity .16s ease, transform .16s var(--shf-ease); }
.shf .shf3-ub:hover::after, .shf .shf3-ub:focus-visible::after { opacity: 1; transform: translateY(0); }

/* the constellation: the thread is drawn by footer-v3.js through wherever the nodes sit; nodes and words are HTML */
.shf .shf3-sky { position: relative; display: block; height: 150px; margin-top: 12px; }
.shf .shf3-web { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.shf .shf3-web path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.shf .shf3-ahead { stroke: url(#shf3-agrad); stroke-width: 2.5; stroke-dasharray: 0 9; }
.shf .shf3-glow { stroke: url(#shf3-grad); stroke-width: 12; opacity: .2; }
.shf .shf3-line { stroke: url(#shf3-grad); stroke-width: 3; }
.shf .shf3-lit, .shf .shf3-lit-in { position: absolute; inset: 0; pointer-events: none; }
.shf .shf3-lit { overflow: hidden; }

.shf .shf3-n { --x: 50%; --y: 74px; --c: #246b5f; --t: #3fb39d; --h: rgba(63, 179, 157, .45); position: absolute; left: calc(var(--x) - 22px); top: calc(var(--y) - 22px); width: 44px; height: 44px; }
.shf .shf3-n--assess { --x: 9%; --y: 96px; }
.shf .shf3-n--train { --x: 36%; --y: 52px; --c: #2b8fd6; --t: #4ea6ec; --h: rgba(78, 166, 236, .45); }
.shf .shf3-n--eat { --x: 63%; --y: 96px; --c: #3d9442; --t: #5cb860; --h: rgba(92, 184, 96, .45); }
.shf .shf3-n--help { --x: 90%; --y: 52px; --c: #d6336c; --t: #ec6a98; --h: rgba(236, 106, 152, .45); }
/* the light arriving: one ring as the thread reaches the node */
.shf .shf3-n::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--t); opacity: 0; pointer-events: none; }
.shf .shf3-node { position: relative; display: block; width: 44px; height: 44px; border-radius: 50%; color: #fff; text-decoration: none; }
.shf .shf3-dot { position: absolute; inset: 2px; display: grid; place-items: center; border-radius: 50%; color: #fff;
	background-color: var(--c); background-image: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 60%);
	box-shadow: 0 0 0 3.5px #0e2130, 0 0 0 5px var(--t), 0 10px 22px -8px rgba(0, 0, 0, .6); transition: transform .18s var(--shf-ease); }
.shf .shf3-dot .shf3-i { width: 19px; height: 19px; }
/* the halo behind, and the ring that answers a pointer or the keyboard */
.shf .shf3-dot::before { content: ""; position: absolute; inset: -18px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, var(--h), rgba(15, 34, 48, 0)); opacity: .6; transform: scale(.9); transition: opacity .3s ease, transform .4s var(--shf-ease); }
.shf .shf3-dot::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--t); opacity: 0; pointer-events: none; }
.shf .shf3-node:hover .shf3-dot, .shf .shf3-node:focus-visible .shf3-dot { transform: translateY(-2px) scale(1.06); }
.shf .shf3-node:hover .shf3-dot::before, .shf .shf3-node:focus-visible .shf3-dot::before { opacity: 1; transform: scale(1.15); }
.shf .shf3-node:focus-visible { outline-offset: 7px; border-radius: 50%; }
/* the words: below the low nodes, above the high ones, so they never sit on the thread */
.shf .shf3-name { position: absolute; left: 50%; top: calc(100% + 7px); transform: translateX(-50%); color: var(--shf-link); font: 700 14px/1.2 var(--shf-body); white-space: nowrap; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color .16s ease, text-decoration-color .16s ease; }
.shf .shf3-n--train .shf3-name, .shf .shf3-n--help .shf3-name { top: auto; bottom: calc(100% + 7px); }
.shf .shf3-node:hover .shf3-name, .shf .shf3-node:focus-visible .shf3-name { color: #fff; text-decoration-color: var(--t); }

/* stars, the end of the route, the spark that rides the light */
.shf .shf3-stars { position: absolute; inset: 0; pointer-events: none; }
.shf .shf3-star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #e8f1f5; opacity: .45; }
.shf .shf3-star--1 { left: 19%; top: 22px; }
.shf .shf3-star--2 { left: 27%; top: 128px; width: 4px; height: 4px; box-shadow: 0 0 6px rgba(143, 211, 239, .7); }
.shf .shf3-star--3 { left: 49%; top: 16px; }
.shf .shf3-star--4 { left: 52%; top: 132px; }
.shf .shf3-star--5 { left: 74%; top: 30px; width: 4px; height: 4px; box-shadow: 0 0 6px rgba(236, 106, 152, .6); }
.shf .shf3-star--6 { left: 79%; top: 120px; }
.shf .shf3-star--7 { left: 3%; top: 40px; }
.shf .shf3-end { position: absolute; left: calc(100% - 14px); top: 26px; width: 20px; height: 20px; margin: -10px 0 0 -10px; color: #f2f8fb; pointer-events: none; }
.shf .shf3-end-i { display: block; width: 20px; height: 20px; filter: drop-shadow(0 0 5px rgba(236, 106, 152, .75)); }
.shf .shf3-spark { position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; opacity: 0; pointer-events: none;
	background: radial-gradient(circle, #fff 0 2.6px, rgba(143, 211, 239, .95) 4.4px, rgba(143, 211, 239, .32) 7.5px, rgba(143, 211, 239, 0) 12px); }

/* the closing line, and in its place, what a node is for while it has the pointer or the keyboard (needs :has()) */
.shf .shf3-cap { display: grid; margin-top: 14px; }
.shf .shf3-cap-i { grid-area: 1 / 1; color: var(--shf-head); font: 700 17px/1.4 var(--shf-display); letter-spacing: -.01em; transition: opacity .2s ease, transform .2s var(--shf-ease); }
.shf .shf3-cap--rest b { font-weight: 800; color: #ec6a98; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.shf .shf3-cap--rest b { background: var(--shf-thread); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.shf .shf3-cap-i:not(.shf3-cap--rest) { opacity: 0; transform: translateY(4px); pointer-events: none; }
.shf .shf3-cap-i:not(.shf3-cap--rest) b { color: var(--t, var(--shf-link)); }
.shf .shf3-cap-dash { color: var(--shf-quiet); font-weight: 400; }
.shf .shf3-cap--assess { --t: #3fb39d; }
.shf .shf3-cap--train { --t: #4ea6ec; }
.shf .shf3-cap--eat { --t: #5cb860; }
.shf .shf3-cap--help { --t: #ec6a98; }
/* Keyboard focus takes priority over a pointer resting on another node: show one caption at a time. */
.shf .shf3-journey:has(.shf3-n--assess .shf3-node:focus-visible) .shf3-cap--assess,
.shf .shf3-journey:has(.shf3-n--train .shf3-node:focus-visible) .shf3-cap--train,
.shf .shf3-journey:has(.shf3-n--eat .shf3-node:focus-visible) .shf3-cap--eat,
.shf .shf3-journey:has(.shf3-n--help .shf3-node:focus-visible) .shf3-cap--help,
.shf .shf3-journey:not(:has(.shf3-node:focus-visible)):has(.shf3-n--assess .shf3-node:hover) .shf3-cap--assess,
.shf .shf3-journey:not(:has(.shf3-node:focus-visible)):has(.shf3-n--train .shf3-node:hover) .shf3-cap--train,
.shf .shf3-journey:not(:has(.shf3-node:focus-visible)):has(.shf3-n--eat .shf3-node:hover) .shf3-cap--eat,
.shf .shf3-journey:not(:has(.shf3-node:focus-visible)):has(.shf3-n--help .shf3-node:hover) .shf3-cap--help { opacity: 1; transform: translateY(0); }
.shf .shf3-journey:has(.shf3-node:is(:hover, :focus-visible)) .shf3-cap--rest { opacity: 0; transform: translateY(-4px); }

/* ---------- the bottom bar: Explore more, then Legal & privacy, the copyright and Google's notice ---------- */
.shf .shf-bar { position: relative; border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(4, 14, 21, .35); }
.shf .shf-bar-inner.shf3-bar { display: grid; gap: 12px; width: min(1240px, 100% - 2 * var(--shf-gutter)); margin: 0 auto; padding: 18px 0 calc(var(--shf-clear-y) + env(safe-area-inset-bottom, 0px)); }
.shf .shf3-bar-g { display: grid; gap: 0; }
.shf .shf3-bar-k { color: var(--shf-quiet); font: 800 11.5px/1.3 var(--shf-body); letter-spacing: .12em; text-transform: uppercase; }
.shf .shf3-bar-list { display: flex; flex-wrap: wrap; align-items: center; }
.shf .shf3-bar-list > li { display: inline-flex; align-items: center; }
.shf .shf3-bar-list > li + li::before { content: ""; flex: none; width: 3px; height: 3px; margin: 0 11px; border-radius: 50%; background: rgba(195, 212, 221, .55); }
/* Explore more: pages to read, so a little brighter than the legal links */
.shf .shf3-bar-g--more .shf-link { min-height: 40px; font: 600 14.5px/1.3 var(--shf-body); text-underline-offset: 5px; }
.shf .shf-legal a { display: inline-flex; align-items: center; min-height: 40px; color: #b4c8d4; font: 500 14px/1.3 var(--shf-body); text-decoration: underline; text-decoration-color: rgba(110, 196, 232, .45); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color .16s ease, text-decoration-color .16s ease; }
.shf .shf-legal a:hover, .shf .shf-legal a:focus-visible { color: #fff; text-decoration-color: var(--shf-sky); }
/* "Manage consent": Complianz's control, styled as one more legal link. The class carries Complianz's floating-button
   styles (style.css), so they are reset here (as in V2). */
.shf .shf-legal button.shf-consent { all: unset; box-sizing: border-box; display: inline-flex !important; align-items: center; position: static !important; min-height: 40px; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; transform: none !important; color: #b4c8d4 !important; font: 500 14px/1.3 var(--shf-body) !important; letter-spacing: 0 !important; text-decoration: underline; text-decoration-color: rgba(110, 196, 232, .45); text-decoration-thickness: 1.5px; text-underline-offset: 4px; cursor: pointer; }
.shf .shf-legal button.shf-consent:hover, .shf .shf-legal button.shf-consent:focus-visible { color: #fff !important; text-decoration-color: var(--shf-sky); }
.shf .shf3-copy { color: var(--shf-quiet); font-size: 13.5px; line-height: 1.5; }

/* reCAPTCHA (owner, 19 Oct 2026, as in V2): the floating badge is hidden, because Google's notice is shown here on every
   page with this footer. visibility, not display, is Google's documented way, so reCAPTCHA keeps working. */
.grecaptcha-badge { visibility: hidden !important; }
.shf .shf-bar p.shf-recaptcha { color: var(--shf-quiet); font-size: 12.5px; line-height: 1.5; }
.shf .shf-bar p.shf-recaptcha a { color: #c3d4dd; text-decoration: underline; text-decoration-color: rgba(110, 196, 232, .5); text-underline-offset: 2px; }
.shf .shf-bar p.shf-recaptcha a:hover, .shf .shf-bar p.shf-recaptcha a:focus-visible { color: #fff; text-decoration-color: var(--shf-sky); }

/* ---------- narrow phones: the same journey, a little tighter ---------- */
@media (max-width: 399.98px) {
	.shf .shf3-jk { font-size: 12px; letter-spacing: .1em; }
	.shf .shf3-util { gap: 6px; }
	.shf .shf3-name { font-size: 13px; }
	.shf .shf3-cap-i { font-size: 16px; }
}
@media (max-width: 767.98px) {
	.shf .shf3-journey { padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .08); }
	.shf .shf3-sky { height: 140px; }
	.shf .shf3-n--assess { --x: 11%; --y: 90px; }
	.shf .shf3-n--train { --x: 37%; --y: 50px; }
	.shf .shf3-n--eat { --x: 63%; --y: 90px; }
	.shf .shf3-n--help { --x: 88%; --y: 50px; }
	.shf .shf3-star--2 { top: 122px; }
	.shf .shf3-star--4 { top: 128px; }
	.shf .shf3-star--6 { top: 116px; }
}

/* ---------- tablets: brand and Explore on the left, the journey on the right ---------- */
@media (min-width: 768px) {
	.shf::after { -webkit-mask-image: radial-gradient(46% 80% at 80% 42%, #000 20%, transparent 75%); mask-image: radial-gradient(46% 80% at 80% 42%, #000 20%, transparent 75%); }
	.shf .shf-inner.shf3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "brand journey" "explore journey"; column-gap: clamp(32px, 5vw, 56px); row-gap: 32px; align-items: start; }
	/* the bar's links stop short of the floating utilities in the bottom-right corner */
	.shf .shf-bar-inner.shf3-bar { display: flex; flex-wrap: wrap; align-items: center; column-gap: 28px; row-gap: 2px; padding: 10px max(0px, var(--shf-clear-x) - (100vw - min(1240px, 100vw - 2 * var(--shf-gutter))) / 2) 12px 0; }
	.shf .shf3-bar-g { display: flex; align-items: center; gap: 12px; }
	.shf .shf3-copy { order: -1; flex-basis: 100%; padding-top: 8px; }
	.shf .shf-bar p.shf-recaptcha { flex-basis: 100%; padding-bottom: 4px; }
}

/* ---------- desktop: brand, Explore and the journey side by side ---------- */
@media (min-width: 1024px) {
	.shf .shf-inner.shf3 { grid-template-columns: minmax(0, 1.1fr) minmax(150px, .48fr) minmax(0, 1.32fr); grid-template-areas: "brand explore journey"; column-gap: clamp(40px, 5vw, 76px); }
	.shf .shf3-explore ul { grid-template-columns: minmax(0, 1fr); }
	.shf .shf3-explore .shf-link { min-height: 40px; }
	.shf .shf3-copy { flex-basis: auto; padding-top: 0; margin-right: auto; }
	.shf .shf3-bar-g--legal::before { content: ""; flex: none; width: 1px; height: 18px; margin-right: 4px; background: rgba(255, 255, 255, .14); }
}

/* ---------- motion ---------- */
/* V2's: the line under the wordmark grows from nothing to its full width, once, when the footer appears */
@media (prefers-reduced-motion: no-preference) {
	.shf.shf-armed .shf-squig { clip-path: inset(0 100% 0 0); }
	.shf.shf-armed.is-in .shf-squig { animation: shf-grow 1.1s var(--shf-ease) .2s both; }
	.shf .shf3-node:hover .shf3-dot::after, .shf .shf3-node:focus-visible .shf3-dot::after { animation: shf3-ring 1s ease-out 1 both; }
	/* scroll-linked (footer-v3.js): the script moves the relay, the lit thread's clip box and the spark by transform only */
	.shf.shf3-live .shf3-relay { opacity: 1; will-change: transform, opacity; }
	.shf.shf3-live .shf3-lit, .shf.shf3-live .shf3-lit-in, .shf.shf3-live .shf3-spark { will-change: transform, opacity; }
	.shf.shf3-live .shf3-n { transition: opacity .45s ease, transform .55s var(--shf-pop); }
	.shf.shf3-live .shf3-n:not(.is-lit) { opacity: .42; transform: scale(.78); }
	.shf.shf3-live .shf3-n.is-lit::after { animation: shf3-ring 1s ease-out 1 both; }
	.shf.shf3-live .shf3-star { transition: opacity .8s ease; }
	.shf.shf3-live .shf3-star:not(.is-lit) { opacity: .08; }
	.shf.shf3-live .shf3-end { transition: opacity .4s ease, transform .6s var(--shf-pop); }
	.shf.shf3-live .shf3-end:not(.is-lit) { opacity: 0; transform: scale(.4) rotate(-40deg); }
}
@keyframes shf-grow { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes shf3-ring { from { opacity: .85; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } }
@media (prefers-reduced-motion: reduce) {
	.shf *, .shf *::before, .shf *::after { animation: none !important; transition: none !important; }
	.shf .shf3-relay, .shf .shf3-spark { display: none; }
}
@media print {
	.shf .shf3-relay, .shf .shf3-spark, .shf .shf3-stars, .shf .shf3-end, .shf .shf3-util { display: none !important; }
}