/* Harvest Your Health 2026: scoped to .nsh26 only. October Wellness Station palette; fonts come
   from the theme (Source Serif 4 / Source Sans 3) with Georgia / Arial fallbacks.

   Sizes are in px, deliberately. rem is root-relative, and a host theme that sets html{font-size:10px}
   - a common Bootstrap/Shoestrap root - silently shrinks every rem size by 37.5%: an 18px control
   becomes 11px. That is the reported "tiny text and very narrow column" (#279/6207602121). px keeps the
   component at the size it was designed at whatever the host root is, and browser text enlargement and
   page zoom both still scale px, so nothing is lost by it. Media queries keep rem on purpose: a media
   query is evaluated against the INITIAL root size, not the page's, so it is already root-immune and
   converting it would change which breakpoints fire. */
.nsh26 {
	--nsh26-ink: #342317;
	--nsh26-ink2: #4F4238;
	--nsh26-paper: #fffdf8;
	/* Shared campaign palette (#279/6210171903): one cream, one warm outer neutral, one divider,
	   one control red, carried verbatim from the Communications materials so the signup shell and
	   the flyer/sign read as one system. */
	--nsh26-cream: #fffaf0;
	--nsh26-sand: #f1ece1;
	--nsh26-gold: #E8B547;
	--nsh26-red: #C4180B;
	--nsh26-red-dk: #9E1309;
	--nsh26-sienna: #B04A22;
	--nsh26-sienna-dk: #9A3C18;
	/* Controls: links, focus rings, secondary buttons, tabs, the checkbox accent. This is the
	   "accessible dark red controls" value from the shared system. It replaces the teal that used to
	   do this job; measured 7.1-8.3:1 on every surface it sits on, which beats the teal it replaces. */
	--nsh26-ctl: #8e2c11;
	--nsh26-ctl-dk: #6e2009;
	--nsh26-line: #6B5E52;
	--nsh26-rule: #dfcfb7;
	/* STATUS COLOURS, kept distinct on purpose. With teal gone the palette is red-dominated, and the
	   old error colour (sienna-dk) sits only dE 6 from the new control red - a reader could not tell
	   an error from a link by hue. So errors now use the campaign red itself (dE 28 from controls,
	   5.1-6.0:1 on every surface) and success states drop hue altogether: ink text plus the check
	   glyph and the word, with a neutral border. Nothing here is colour-alone - errors also carry a
	   thick left border, bold weight and the counted summary badge - but distinct hue is kept where
	   it can be. The deck keeps sienna-dk; it is not a status. */
	--nsh26-err: #C4180B;
	--nsh26-ok: #342317;
	--nsh26-ok-line: #6B5E52;
	/* Retained for reference only. Nothing in the component uses it any more: the owner brief
	   asks for a clean modern sans throughout, and the serif was winning on the deck, the
	   headings and the fieldset legends (#279/6208261712). The decorative vector wordmark is
	   the one exception, and it carries its own outlines rather than a font. */
	--nsh26-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
	--nsh26-sans: "Source Sans 3", Arial, Helvetica, sans-serif;
	box-sizing: border-box;
	max-width: 736px;
	margin: 0 auto 48px;
	/* The card asks for 16-20px mobile gutters. border-box keeps the column at 736px including them, so
	   this never widens the measure; if the theme also pads, the total is simply roomier. */
	padding: 0 16px;
	color: var(--nsh26-ink);
	font-family: var(--nsh26-sans);
	font-size: 18px;
	line-height: 1.55;
	overflow-wrap: break-word;
}
.nsh26 *, .nsh26 *::before, .nsh26 *::after { box-sizing: inherit; }
.nsh26 p, .nsh26 ul, .nsh26 ol, .nsh26 dl, .nsh26 fieldset { margin: 0 0 16px; }
.nsh26 a { color: var(--nsh26-ctl); text-decoration: underline; text-underline-offset: 0.15em; }
.nsh26 a:hover { color: var(--nsh26-ctl-dk); text-decoration-thickness: 2px; }
/* Focus is a TWO-TONE ring, so it stays discernible on every surface it can land on: a 2px white inner
   layer and the 3px control-red outer ring. On cream or white the dark ring does the work (8.3:1); on
   the red and dark-red buttons the white layer does (5.9:1 against #9E1309), where the dark ring alone
   measured 1.01:1 against the focused button and was discernible only through the gap (#279/6210213164).
   The white layer is a box-shadow, so it fills the outline-offset gap exactly and never adds size. */
.nsh26 :focus-visible { outline: 3px solid var(--nsh26-ctl); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }
.nsh26 [data-nsh26-focus], .nsh26 input, .nsh26 select { scroll-margin-top: 112px; }
.nsh26 [tabindex="-1"]:focus { outline: none; }
.nsh26 [tabindex="-1"]:focus-visible { outline: 3px solid var(--nsh26-ctl); outline-offset: 4px; box-shadow: 0 0 0 4px #fff; }
/* Headings receive focus only so screen readers start at the new step; they are not controls. */
.nsh26 .nsh26-h[tabindex="-1"]:focus-visible { outline: none; }
.nsh26-nowrap { white-space: nowrap; }
.nsh26-sr, .nsh26-hp {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Orientation band: compact heading and one date line, then the form. Carries the artwork kit's tree
   (harvest-tree-224.png, 17e29788...af3c) at its exact aspect ratio - never stretched, cropped,
   recoloured or upscaled past its native size. The compact pages take the SAME tree as the sign-up
   lockup so the personal and weekly pages never carry a second illustration style. Phones: the art
   sits beside the eyebrow so the first field still comes early. Wider screens: larger. */
.nsh26-band {
	display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px;
	background: var(--nsh26-cream);
	border-top: 4px solid var(--nsh26-sienna);
	border-radius: 0 0 8px 8px;
	padding: 16px 20px 18px;
	margin: 0 0 24px;
}
.nsh26-band > * { grid-column: 1 / -1; min-width: 0; }
.nsh26-band > .nsh26-mark { grid-column: 1; grid-row: 1; width: 52px; margin: 0 0 6px; }
/* The kit tree is 224x229 at 1x. Height follows from the width so it is never distorted, and the
   explicit aspect-ratio keeps the band from reflowing before the image decodes. */
.nsh26-mark { display: block; height: auto; max-width: min(100%, 224px); aspect-ratio: 224 / 229; }
.nsh26-band > .nsh26-eyebrow { grid-column: 2; grid-row: 1; margin-bottom: 6px !important; }
.nsh26-eyebrow {
	margin: 0 !important; color: var(--nsh26-ink2); font-size: 15px; font-weight: 700;
	letter-spacing: 0.06em; text-transform: uppercase;
}
.nsh26-title {
	margin: 0 0 4px; font-family: var(--nsh26-sans); font-size: 34px; font-weight: 700;
	line-height: 1.12; color: var(--nsh26-ink);
}
/* The tagline is two sentences and is allowed to take two lines on a narrow phone rather than be set
   smaller or clipped. Where it does, the break belongs BETWEEN the sentences, and balance is what
   actually puts it there: measured at 390, 360 and 320, balance gives "Grow healthy habits." /
   "Reap the benefits." (155 + 135), while the default strands "benefits." alone (224 + 65) and
   pretty breaks inside the second sentence ("... Reap" / "the benefits.", 196 + 94). The previous
   wording wanted pretty; this one wants balance. A rule tuned to old copy goes on looking correct
   while quietly doing the wrong thing to new copy, so it was re-measured rather than carried over.
   The markup is left alone deliberately: a nowrap span or a <br> would fix the break in every
   browser but would also stop the approved line appearing contiguously in the page source. */
.nsh26-deck { font-family: var(--nsh26-sans); font-size: 20px; line-height: 1.3; color: var(--nsh26-sienna-dk); margin-bottom: 10px !important;
	text-wrap: balance; }
.nsh26-dates { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0 !important; }
/* The dates were nowrap when they read "Oct 31-Nov 20". Spelled out in full they no longer fit a
   320px screen on one line, and nowrap turned that into horizontal page overflow rather than a wrap. */
.nsh26-dates li { border-left: 4px solid var(--nsh26-gold); padding-left: 8px; line-height: 1.4; }
.nsh26-dates__k { color: var(--nsh26-ink2); font-weight: 600; }
.nsh26-dates__v { font-weight: 700; }
.nsh26-band--compact .nsh26-title { font-size: 28px; margin: 0; }

/* Task area */
.nsh26-task { padding: 0 2px; }
.nsh26-h, .nsh26 h2, .nsh26 h3 { font-family: var(--nsh26-sans); color: var(--nsh26-ink); line-height: 1.2; }
.nsh26-h, .nsh26 h2 { font-size: 26px; margin: 0 0 12px; }
.nsh26 h3 { font-size: 20px; margin: 24px 0 8px; }
.nsh26-step { font-weight: 700; color: var(--nsh26-ink2); margin-bottom: 12px !important; }
.nsh26-prep { color: var(--nsh26-ink2); margin-bottom: 12px !important; }
.nsh26-consistent {
	background: var(--nsh26-sand); border-left: 4px solid var(--nsh26-gold); border-radius: 0 6px 6px 0;
	width: fit-content; max-width: 100%; padding: 8px 14px; font-weight: 600; color: var(--nsh26-ink); margin-bottom: 20px !important;
}
.nsh26-eligible { border-left: 4px solid var(--nsh26-gold); padding: 4px 0 4px 14px; color: var(--nsh26-ink); }
.nsh26-panel { margin: 0 0 24px; }

.nsh26-group { border: 0; padding: 0; margin: 0 0 28px !important; min-width: 0; }
.nsh26-group legend {
	font-family: var(--nsh26-sans); font-size: 20px; font-weight: 700; padding: 0; margin: 0 0 12px;
}
.nsh26-field { margin: 0 0 20px; }
.nsh26-field label { display: block; font-weight: 700; margin: 0 0 4px; }
.nsh26-help { color: var(--nsh26-ink2); font-size: 16px; margin: 0 0 6px !important; }
.nsh26 input[type="text"], .nsh26 input[type="email"], .nsh26 select {
	display: block; width: 100%; max-width: 512px; min-height: 46px; margin: 0;
	padding: 8px 12px; font: inherit; font-size: 18px; color: var(--nsh26-ink);
	background: #fff; border: 2px solid var(--nsh26-line); border-radius: 6px;
	box-shadow: none;
}
.nsh26 select { appearance: auto; padding-right: 8px; }
.nsh26 input:focus-visible, .nsh26 select:focus-visible { outline: 3px solid var(--nsh26-ctl); outline-offset: 2px; border-color: var(--nsh26-ctl); box-shadow: 0 0 0 2px #fff; }
.nsh26-field.is-invalid { border-left: 4px solid var(--nsh26-err); padding-left: 14px; }
.nsh26-field.is-invalid input, .nsh26-field.is-invalid select { border-color: var(--nsh26-err); border-width: 3px; }
.nsh26-error { color: var(--nsh26-err); font-weight: 700; margin: 0 0 6px !important; }
.nsh26-icon {
	display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
	border-radius: 50%; background: var(--nsh26-err); color: #fff; font-size: 14px; font-weight: 700;
	line-height: 1; vertical-align: 0.1em;
}
.nsh26-icon--ok { background: var(--nsh26-ok); }

.nsh26-alert {
	border: 3px solid var(--nsh26-err); border-radius: 8px; background: #fff;
	padding: 16px 18px; margin: 0 0 24px;
}
.nsh26-alert:not(.nsh26-alert--problem) { border-color: var(--nsh26-ok-line); }
.nsh26-alert__title { font-family: var(--nsh26-sans); font-size: 19px; font-weight: 700; margin: 0 0 8px !important; }
.nsh26-alert ul { margin: 0 !important; padding-left: 20px; }
.nsh26-alert li { margin: 4px 0; }
.nsh26-alert a { color: var(--nsh26-ctl); font-weight: 700; }
.nsh26-alert p:last-child { margin-bottom: 0; }

/* Buttons: one primary treatment, one quiet secondary. */
.nsh26-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 24px 0 16px; }
.nsh26-btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 46px;
	padding: 10px 22px; border-radius: 6px; font: inherit; font-size: 18px;
	font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none !important; cursor: pointer;
}
.nsh26-btn--primary { background: var(--nsh26-red); color: #fff !important; border: 2px solid var(--nsh26-red); }
.nsh26-btn--primary:hover { background: var(--nsh26-red-dk); border-color: var(--nsh26-red-dk); }
.nsh26-btn--secondary { background: #fff; color: var(--nsh26-ctl) !important; border: 2px solid var(--nsh26-ctl); }
.nsh26-btn--secondary:hover { background: var(--nsh26-sand); }
.nsh26-btn[aria-disabled="true"] { cursor: progress; opacity: 0.85; }
.nsh26-slow { color: var(--nsh26-ink2); }

/* Review and receipt */
.nsh26-review { margin: 0 0 20px !important; border-top: 1px solid var(--nsh26-rule); }
.nsh26-review > div { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--nsh26-rule); }
.nsh26-review dt { color: var(--nsh26-ink2); font-weight: 600; font-size: 16px; }
.nsh26-review dd { margin: 0; font-weight: 700; }
.nsh26-break { overflow-wrap: anywhere; }
.nsh26-keep { background: var(--nsh26-sand); border-radius: 6px; padding: 12px 16px; }
.nsh26-receipt__badge { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; color: var(--nsh26-ok); margin: 0 0 4px !important; }
.nsh26-meta { color: var(--nsh26-ink2); font-size: 16px; }
.nsh26-link { background: var(--nsh26-paper); border: 2px solid var(--nsh26-rule); border-radius: 8px; padding: 16px 18px; margin: 20px 0; }
.nsh26-link h3 { margin-top: 0; }
.nsh26 .nsh26-link__field { max-width: none; font-size: 16px; font-family: ui-monospace, Menlo, Consolas, monospace; background: #fff; }
.nsh26-link .nsh26-actions { margin: 14px 0 8px; }
.nsh26-status { min-height: 24px; font-weight: 700; color: var(--nsh26-ok); margin: 0 0 8px !important; }

/* The access step. Reuses .nsh26-check (24px box, 44px touch row) and .nsh26-help rather than
   inventing a second checkbox treatment, so it matches the weekly habit checkboxes people already
   use. The choice sits directly above the button it governs, which is the only place it reads as
   being about this action rather than about the page. */
.nsh26-access { margin: 14px 0 0; }
.nsh26-access .nsh26-check { margin: 0 !important; }
.nsh26-access .nsh26-help { margin: 0 0 4px !important; }
.nsh26-note { color: var(--nsh26-ink2); font-size: 16px; }
.nsh26-weeks { padding-left: 24px; }
.nsh26-weeks li { margin: 4px 0; }
.nsh26-preview-flag { background: var(--nsh26-sand); border: 2px dashed var(--nsh26-err); border-radius: 6px; padding: 8px 12px; font-weight: 700; }

/* Lost link: progressive disclosure */
.nsh26-recover { border-top: 1px solid var(--nsh26-rule); margin: 28px 0 0; padding-top: 12px; }
.nsh26-recover summary {
	cursor: pointer; font-weight: 700; color: var(--nsh26-ctl); min-height: 44px;
	display: flex; align-items: center; text-decoration: underline; text-underline-offset: 0.15em;
}
.nsh26-recover__body { padding: 8px 0 0; }

.nsh26-about { border-top: 4px solid var(--nsh26-rule); margin-top: 40px; padding-top: 20px; }
.nsh26-about h2 { font-size: 22px; }
.nsh26-about h3 { font-size: 18px; }

@media (min-width: 40rem) {
	.nsh26-band { grid-template-columns: 1fr auto; column-gap: 32px; padding: 24px 32px; }
	.nsh26-band > * { grid-column: 1; }
	.nsh26-band > .nsh26-eyebrow { grid-column: 1; }
	.nsh26-band > .nsh26-mark { grid-column: 2; grid-row: 1 / span 4; width: 136px; margin: 0; }
	.nsh26-band--compact > .nsh26-mark { grid-row: 1 / span 2; width: 84px; }
	.nsh26-title { font-size: 44px; }
	.nsh26-review > div { grid-template-columns: 176px 1fr; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.nsh26 * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
	.nsh26-actions, .nsh26-recover, .nsh26-forget { display: none !important; }
}

/* 0.2.0: shared page top (Member Hub return, INtegrate mark, Contact) for all four Harvest pages. */
.nsh26-top {
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px 16px;
	margin: 0 0 16px; padding: 4px 0 12px; border-bottom: 1px solid var(--nsh26-rule);
}
.nsh26-top a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.nsh26-top__back { justify-self: start; }
.nsh26-top__contact { justify-self: end; text-transform: uppercase; letter-spacing: 0.08em; font-size: 15px; }
.nsh26-top__mark { justify-self: center; display: block; width: 154px; height: auto; }
/* Phones: one row (back, mark, Contact) so the task starts early; "Back to" stays in the accessible name. */
@media (max-width: 30rem) {
	.nsh26-top { gap: 4px 8px; padding-bottom: 4px; margin-bottom: 12px; }
	.nsh26-top__mark { width: 118px; }
	.nsh26-top a { font-size: 15px; }
	.nsh26-top__contact { letter-spacing: 0.04em; }
	.nsh26-top__long { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

/* Weekly entry on the personal page. */
.nsh26-weeklist { list-style: none; padding: 0; margin: 0 0 24px !important; border-top: 1px solid var(--nsh26-rule); }
.nsh26-weeklist__item { padding: 12px 0; border-bottom: 1px solid var(--nsh26-rule); }
.nsh26-weeklist__item p { margin: 0 0 4px !important; }
.nsh26-weeklist__head span { color: var(--nsh26-ink2); }
.nsh26-weeklist__saved { font-weight: 600; }
.nsh26-weeklist__state { color: var(--nsh26-ink2); font-size: 16px; }
.nsh26-wstatus { display: inline-block; font-family: var(--nsh26-sans); font-size: 16px; font-weight: 700; line-height: 1.3; padding: 1.6px 8px; border-radius: 4px; border: 1px solid var(--nsh26-line); color: var(--nsh26-ink2) !important; background: var(--nsh26-paper); }
.nsh26-wstatus--done { border-color: var(--nsh26-ok-line); color: var(--nsh26-ok) !important; }
.nsh26-wstatus--open { border-color: var(--nsh26-sienna); color: var(--nsh26-sienna) !important; }
.nsh26-weekly__results { margin: 0 0 16px !important; }
.nsh26-entry { background: var(--nsh26-paper); border: 1px solid var(--nsh26-rule); border-top: 4px solid var(--nsh26-gold); border-radius: 0 0 8px 8px; padding: 16px 20px 20px; margin: 0 0 24px; }
.nsh26 .nsh26-entry__h { margin-top: 0; }
.nsh26-entry__meta { color: var(--nsh26-ink2); font-size: 16px; }
.nsh26-legend-note { font-family: var(--nsh26-sans); font-size: 16px; font-weight: 600; color: var(--nsh26-ink2); }
.nsh26-check { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 44px; margin: 0 0 4px !important; }
.nsh26-check input[type="checkbox"] { width: 24px; height: 24px; margin: 0; accent-color: var(--nsh26-ctl); flex: none; }
.nsh26-check label { font-weight: 600; cursor: pointer; }
.nsh26-pending { color: var(--nsh26-ink2); border-left: 4px solid var(--nsh26-rule); padding-left: 12px; }
.nsh26-total { font-weight: 700; }
.nsh26-alert--ok { border-color: var(--nsh26-ok-line); }
.nsh26-steps { padding-left: 24px; }
.nsh26-steps li { margin: 0 0 8px; }

/* Results */
.nsh26-tabs ul { list-style: none; padding: 0; margin: 0 0 20px !important; display: flex; flex-wrap: wrap; gap: 8px; }
.nsh26-tabs a {
	display: inline-flex; align-items: center; min-height: 44px; padding: 4px 16px; border: 2px solid var(--nsh26-ctl);
	border-radius: 999px; text-decoration: none; font-weight: 700;
}
.nsh26-tabs a[aria-current="page"] { background: var(--nsh26-ctl); color: #fff; }
.nsh26-tablewrap { overflow-x: auto; margin: 0 0 16px; }
.nsh26-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.nsh26-table th, .nsh26-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--nsh26-rule); vertical-align: top; }
.nsh26-table thead th { font-size: 15px; color: var(--nsh26-ink2); border-bottom: 2px solid var(--nsh26-sienna); }
.nsh26-table tbody th { font-weight: 600; }
.nsh26-table td:first-child { font-weight: 700; width: 56px; }
.nsh26-unit { color: var(--nsh26-ink2); font-weight: 400; font-size: 15px; }
.nsh26-na { color: var(--nsh26-ink2); font-style: italic; }
.nsh26-flag { display: inline-block; font-size: 14px; font-weight: 700; color: var(--nsh26-err); }
.nsh26-more { font-weight: 600; }
.nsh26 .nsh26-weeklist__h, .nsh26 .nsh26-waiting__h { font-size: 18px; margin: 24px 0 8px; }
.nsh26-waiting { columns: 2 224px; column-gap: 32px; padding-left: 20px; color: var(--nsh26-ink2); }
.nsh26-waiting li { break-inside: avoid; margin: 0 0 4px; }
.nsh26 .nsh26-leaders__h { font-size: 18px; margin: 8px 0 8px; }
.nsh26-more-results { margin: 0 0 20px; }
.nsh26-more-results summary { cursor: pointer; font-weight: 700; color: var(--nsh26-ctl); min-height: 44px; display: flex; align-items: center; text-decoration: underline; text-underline-offset: 0.15em; }

/* Receipt: "Continue to my entry" is the prominent action, so it leads the row and takes the full
   width on phones. "Copy link" stays available beside it (JS reveals it) and the bookmark note
   below is unchanged, so saving the private link is never lost. */
.nsh26-actions--entry { flex-wrap: wrap; }
.nsh26-btn--entry { flex: 1 1 100%; justify-content: center; font-size: 17px; }
@media (min-width: 40rem) {
	.nsh26-btn--entry { flex: 0 0 auto; }
}

/* ---------------------------------------------------------------------------------------------
   Accepted TSC title treatment, from the immutable creative source 5d28c9cb (title-treatments.css).
   A licensed production match - Great Vibes and Anton - not recovered original glyph metadata.
   Both faces are scoped to this plugin under nsh26- names so they cannot leak into the theme, and
   both ship with their OFL notices in assets/fonts/. Source Serif 4 / Source Sans 3 keep every
   control, label and body string, exactly as accepted at 0.2.6.
   --------------------------------------------------------------------------------------------- */
@font-face {
	font-family: nsh26Script; src: url('fonts/GreatVibes-Regular.ttf') format('truetype');
	font-style: normal; font-weight: 400; font-display: swap;
}
@font-face {
	font-family: nsh26Condensed; src: url('fonts/Anton-Regular.ttf') format('truetype');
	font-style: normal; font-weight: 400; font-display: swap;
}
/* line-height 1.02 would clip Great Vibes' descenders, so the script line keeps its own 1.15. */
.nsh26-title--tsc { color: #C4180B; line-height: 1.02; text-wrap: balance; }
.nsh26-title--tsc .nsh26-title__script {
	display: block; font-family: nsh26Script, cursive; font-weight: 400;
	font-size: clamp(52px, 8vw, 104px); line-height: 1.15;
}
.nsh26-title--tsc .nsh26-title__caps {
	display: block; font-family: nsh26Condensed, sans-serif; font-weight: 400;
	font-size: clamp(28.8px, 4.5vw, 56px); letter-spacing: 0.015em; line-height: 1.08;
	text-transform: uppercase;
}
@media (max-width: 35rem) {
	.nsh26-title--tsc .nsh26-title__script { font-size: clamp(40px, 12vw, 56px); }
	.nsh26-title--tsc .nsh26-title__caps { font-size: clamp(20.8px, 6vw, 28.8px); }
}


/* ---------------------------------------------------------------------------------------------
   Sign-up hero, calm direction (#279/6207860054, brief at 235bce49). ONE focal point: the outlined red
   wordmark, with one smaller supporting illustration beside it. No Join word, no stacked colour bands,
   no second banner - the points explanation lives in How it works instead.

   Desktop: title left (max 340px), art right (max 220px). Phone: centred title (max 260px) with the
   art beneath (max 210px). Neither image is ever upscaled past its native size.
   --------------------------------------------------------------------------------------------- */
.nsh26-hero { background: var(--nsh26-cream); }

/* ONE connected illustrated focal group (#279/6208129865). The scene is a single column whose width
   the lettering and the illustration BOTH fill, so the art is scaled against the title rather than
   against whatever space was left over, and the two read as one composition. The art tucks up under
   the lettering so the group has a base instead of a gap. */
.nsh26-hero__group { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
/* Illustration left, lettering right, optically aligned along the bottom so the tree's trunk and the
   wordmark's baseline settle together. The widths are the brief's: about 110 + 190 on the phone and
   160 + 320 on the desktop, which is roughly 35/65 either way. flex-end does the optical alignment;
   min-width:0 lets both shrink at 320 instead of clipping. */
.nsh26-hero__scene { display: flex; flex-direction: row; align-items: flex-end; justify-content: center; gap: 10px; width: 100%; max-width: 330px; margin: 0 auto; }
.nsh26-hero__scene > * { min-width: 0; }
.nsh26-title--mark { margin: 0; line-height: 1; }
.nsh26-title--mark { flex: 0 1 auto; width: 190px; max-width: 65%; }
.nsh26-title__img { display: block; width: 100%; height: auto; }
/* Never past the kit tree's native 224px at 1x, aspect preserved, no crop. */
.nsh26-hero__art { display: block; flex: 0 1 auto; width: 110px; max-width: min(35%, 224px); height: auto; margin: 0; }
.nsh26-hero .nsh26-deck { margin: 0 !important; }
.nsh26-hero .nsh26-dates { margin-top: 16px !important; }

@media (min-width: 40rem) {
	/* Desktop: the same single scene, larger. 460px keeps both inside the 800px native art and well
	   inside the content column, so neither element is ever upscaled. */
	.nsh26-hero__scene { max-width: 512px; gap: 16px; }
	.nsh26-hero__art { width: 160px; }
	.nsh26-title--mark { width: 320px; }
}

/* Comfortable inner padding on the warm surfaces: 32px desktop, 20px phone, 16px at 320. */
.nsh26-band, .nsh26-panel { padding: 20px; }
@media (min-width: 40rem) {
	.nsh26-band, .nsh26-panel { padding: 32px; }
}
@media (max-width: 20rem) {
	.nsh26-band, .nsh26-panel { padding: 16px; }
}

/* First and last name side by side from tablet up, stacked on the phone. */
.nsh26-names { display: grid; grid-template-columns: 1fr; gap: 0 20px; }
@media (min-width: 40rem) {
	.nsh26-names { grid-template-columns: 1fr 1fr; }
}

/* The primary action is white on campaign red in EVERY state, anchor or button. The reported
   dark-text-on-dark came from a theme rule winning on a:link/:visited, which the single
   .nsh26-btn--primary declaration did not cover for anchors (#279/6207546784). Scoped tightly, and the
   states are listed rather than relying on one selector to inherit. */
.nsh26 .nsh26-btn--primary { background: var(--nsh26-red); border-color: var(--nsh26-red); }
.nsh26 .nsh26-btn--primary:hover, .nsh26 .nsh26-btn--primary:focus { background: var(--nsh26-red-dk); border-color: var(--nsh26-red-dk); }
.nsh26 a.nsh26-btn--primary,
.nsh26 a.nsh26-btn--primary:link,
.nsh26 a.nsh26-btn--primary:visited,
.nsh26 a.nsh26-btn--primary:hover,
.nsh26 a.nsh26-btn--primary:focus,
.nsh26 a.nsh26-btn--primary:active,
.nsh26 button.nsh26-btn--primary { color: #fff !important; text-decoration: none !important; }
.nsh26 a.nsh26-btn--secondary,
.nsh26 a.nsh26-btn--secondary:link,
.nsh26 a.nsh26-btn--secondary:visited,
.nsh26 a.nsh26-btn--secondary:hover,
.nsh26 a.nsh26-btn--secondary:focus,
.nsh26 a.nsh26-btn--secondary:active { color: var(--nsh26-red) !important; text-decoration: none !important; }
.nsh26 .nsh26-btn--secondary { color: var(--nsh26-red) !important; border-color: var(--nsh26-red); }


/* A button the markup hides must stay hidden until JavaScript reveals it. .nsh26-btn's own
   display:inline-flex outranks the user-agent [hidden] rule, so without this the no-JS reader sees a
   "Copy link" control that does nothing at all (#279/6207866080). */
.nsh26 .nsh26-btn[hidden], .nsh26 [hidden] { display: none !important; }


/* Vertical budget on a task page (#279/6208257490 item 2, #279/6208261712 item 1). The target is the
   first input within ~650px at 390 while the type stays at 18px, the targets at 44-48px and the
   illustration at a meaningful scale - so the height comes out of spacing and duplication, never out
   of the type. */
.nsh26-step__note { font-weight: 400; color: var(--nsh26-ink2); }
.nsh26-hero { padding-top: 10px; padding-bottom: 12px; }
.nsh26-hero .nsh26-eyebrow { margin-bottom: 6px !important; }
.nsh26-hero__group { gap: 6px; }
.nsh26-hero .nsh26-dates { margin-top: 8px !important; }
.nsh26-hero .nsh26-deck { font-size: 18px; }
.nsh26-form .nsh26-step { margin: 10px 0 8px !important; }
.nsh26-group { margin-bottom: 14px; }
/* The saved-details note now sits beside the action as quiet help, not as a panel above the fields. */
.nsh26-consistent { font-size: 16px; color: var(--nsh26-ink2); background: none; border: 0; padding: 0; margin: 0 0 8px !important; }
@media (min-width: 40rem) {
	.nsh26-hero { padding-top: 20px; padding-bottom: 20px; }
}

/* Keep a date range intact. The whole li was nowrap once and overflowed 320; nowrap on the VALUE
   alone wraps between the label and the date instead of orphaning "20" onto its own line. */
.nsh26-dates__v { white-space: nowrap; }

/* At 320 the scene shrinks proportionally rather than clipping: both children may shrink, and the
   scene itself is never wider than the column it sits in. */
@media (max-width: 20rem) {
	.nsh26-hero__scene { gap: 8px; max-width: 100%; }
	.nsh26-hero__art { width: 92px; }
	.nsh26-title--mark { width: 164px; }
}

/* The maple accent sits in the How-it-works corner. Absolute, so it adds no flow height whatever the
   width; below 34rem there is no spare corner, so it is simply not rendered rather than squeezed.

   Costing no height was only half the condition. At its first placement the sprig still hung into the
   first line of body copy and sat on the words - measured, not guessed, once it was rendered. It now
   hangs into the 40px margin above the section instead, where there is nothing to collide with, and
   the leaves stop about 10px clear of the first line at every width it is drawn at. The heading keeps
   its padding because the two still share a band. */
.nsh26-about { position: relative; }
.nsh26-about__accent { display: none; }
@media (min-width: 34rem) {
	.nsh26-about__accent {
		display: block; position: absolute; top: -32px; right: 0; width: 92px; height: auto;
		opacity: 0.9; pointer-events: none;
	}
	.nsh26-about h2 { padding-right: 104px; }
}