/* Sleeves Up brand layer over Twenty Twenty-Five. Flat surfaces, no gradients. */
/* ---- One appearance for everyone: light, always (added 2026-09-09) ----
   This is a light design -- ivory grounds, ink bands -- and it has to look the
   same to a visitor whose OS is set to dark. Every surface this stylesheet names
   is already painted from a theme token, so those are safe. What it does NOT
   name is everything the BROWSER paints: form widgets, the placeholder, the
   autofill background, scrollbars, the selection highlight. Those follow the
   document's `color-scheme`, and leaving `color-scheme` undeclared hands that
   decision to the user agent. That is the bug to close.

   Measured here on 2026-09-09: with the scheme undeclared, forcing the used
   scheme to dark turns an unstyled input from #fff/#000 into #3b3b3b/#fff and
   its placeholder from grey to white. Desktop Chrome happens to resolve an
   undeclared scheme as light, so it looks fine there -- but Chrome for Android's
   "Darken websites" and Firefox's native widget theming reach the dark state on
   their own. Declaring the scheme is what makes the light rendering a promise
   instead of a default.

   Nothing below restyles the design. It names the colours the browser was
   otherwise choosing. */
:root {
	color-scheme: light;
	/* Checkboxes, radios, range and progress tint from the brand rather than the
	   visitor's OS accent colour, which is per-machine. None ship today; this
	   stops the next one arriving in someone else's blue. */
	accent-color: var(--wp--preset--color--accent-2);
}

/* The placeholder was the one piece of form text this sheet never named, so it
   came from the UA's translucent grey -- which flips to white on a dark used
   scheme and vanishes into the cream field. Muted-on-ivory is the token for
   de-emphasised text on this ground. */
.su-form input::placeholder,
.su-form textarea::placeholder {
	color: var(--wp--preset--color--accent-4);
	/* Firefox dims placeholders to 0.54 on top of whatever colour is set. */
	opacity: 1;
}

/* Chrome paints an autofilled field from an internal light/dark pair, so the
   same saved address lands pale blue on one machine and slate blue-grey on
   another, with the text colour to match. `background-color` does not reach an
   autofilled control; a 100px inset shadow is the documented way to cover it,
   and -webkit-text-fill-color is what actually colours the text. The absurd
   transition delay outlives Chrome's own fade-in of the highlight. */
.su-form input:-webkit-autofill,
.su-form input:-webkit-autofill:hover,
.su-form input:-webkit-autofill:focus,
.su-form textarea:-webkit-autofill {
	-webkit-text-fill-color: var(--wp--preset--color--contrast);
	caret-color: var(--wp--preset--color--contrast);
	box-shadow: inset 0 0 0 100px var(--wp--preset--color--base);
	transition: background-color 100000s ease 0s;
}

/* Selection is UA-painted from the Highlight system colour, which is per-OS and
   per-scheme. Cuff blue under ink is the pair the submit button already uses, and
   it reads on the ivory grounds and the ink bands alike. */
::selection {
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--contrast);
}

/* The nav submenu toggle is a bare <button>, so its colours came off the UA
   button palette. It computes to exactly these two values today; naming them
   drops the dependency without moving a pixel. */
.su-header button {
	background-color: transparent;
	color: var(--wp--preset--color--base);
}

/* ---- The type scale ----
   One scale, four roles, and no one-off sizes anywhere in page markup.

     kicker  0.875rem   uppercase eyebrow above a heading      .su-kicker
     small   0.9375rem  fine print, notes, captions            .su-note / .su-muted
     medium  1.0625rem  body copy and list items               (the default)
     large   1.25rem    every card and column heading (h3)

   Section furniture sits above that scale and is set in theme.json: h1 xxx-large,
   h2 xx-large, and the one section lede per band at large. A card never reaches
   into that range, which was the bug: the old product card ran kicker, x-large,
   small, medium in four consecutive blocks and read as four unrelated sizes.
   The .su-card rules below pin the four roles so markup cannot drift again. */
.su-card h3 {
	font-size: var(--wp--preset--font-size--large);
}
.su-card p,
.su-card li {
	font-size: var(--wp--preset--font-size--medium);
}
.su-card .su-kicker {
	font-size: var(--wp--preset--font-size--kicker);
}
.su-card .su-note {
	font-size: var(--wp--preset--font-size--small);
}

/* ---- Wordmark ---- */
.su-wordmark {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	text-decoration: none;
}
.su-wordmark svg {
	display: block;
	width: auto;
	height: 34px;
}
.su-footer .su-wordmark svg {
	height: 28px;
}
@media (max-width: 600px) {
	.su-wordmark svg {
		height: 26px;
	}
}

/* ---- Dark bands (header, hero, footer, notify) ---- */
.su-dark a {
	color: var(--wp--preset--color--accent-1);
}
.su-dark a:hover,
.su-dark a:focus {
	color: var(--wp--preset--color--base);
}
.su-dark .su-muted {
	color: var(--wp--preset--color--muted-dark);
}

.su-header {
	border-bottom: 1px solid var(--wp--preset--color--border-dark);
}
.su-header .wp-block-navigation {
	font-weight: 700;
	letter-spacing: 0.02em;
}
.su-header .wp-block-navigation a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}
.su-header .wp-block-navigation a:hover,
.su-header .wp-block-navigation a:focus {
	color: var(--wp--preset--color--accent-1);
	text-decoration: underline;
	text-underline-offset: 0.35em;
}
.su-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--contrast);
}

.su-footer {
	border-top: 1px solid var(--wp--preset--color--border-dark);
}

/* ---- Kicker ---- */
.su-kicker {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--kicker);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 0.75rem;
}

/* ---- Section heading rhythm ----
   The decorative rule that used to sit under every h2 is gone (owner review,
   2026-09-09: "I am not liking this random teal lining you keep adding"). It was
   doing a job, which was separating a heading from its body, so space does that
   job now. Core sets the gap with :where(), so a plain descendant selector wins
   without !important. Do not put an ornament back here. */
.su-kicker + h1,
.su-kicker + h2,
.su-kicker + h3 {
	margin-block-start: 0;
}
.su-section h2 + * {
	margin-block-start: 1.75rem;
}

/* ---- Buttons ---- */
.wp-block-button__link {
	border-radius: 2px;
}
.su-btn-ghost .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--base);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--muted-dark);
}
.su-btn-ghost .wp-block-button__link:hover,
.su-btn-ghost .wp-block-button__link:focus {
	background-color: transparent;
	color: var(--wp--preset--color--accent-1);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--accent-1);
}
.su-note {
	font-size: var(--wp--preset--font-size--small);
	margin-top: 0.35rem;
}

/* ---- Lists ---- */
.su-checklist {
	list-style: none;
	padding-left: 0;
}
.su-checklist li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: 0.8rem;
}
.su-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 12px;
	height: 4px;
	background-color: var(--wp--preset--color--accent-2);
}
.su-dark .su-checklist li::before {
	background-color: var(--wp--preset--color--accent-1);
}
.su-nolist {
	list-style: none;
	padding-left: 0;
}
.su-nolist li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: 0.8rem;
}
.su-nolist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 12px;
	height: 4px;
	background-color: var(--wp--preset--color--warning);
}

/* ---- Cards ---- */
.su-card {
	border: 1px solid var(--wp--preset--color--border-light);
}

/* ---- Forms ----
   One control treatment for the opt-in and the contact form. The selectors used to
   name input[type="email"] only, because for a long time the opt-in was the only form
   on the site; the contact form adds a text field and a textarea and there is no
   reason for those to look like a different site. The honeypot input is also a
   [type="text"] inside .su-form, but .su-hp parks it off screen, so it never renders. */
.su-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	max-width: 30rem;
}
.su-form input[type="email"],
.su-form input[type="text"],
.su-form textarea {
	/* border-box, 2026-09-22: the stacked forms set width: 100%, and content-box added the
	   padding and border on top, so every field ran 36px past its panel on /contact/ and
	   /founding-reviewers/. */
	box-sizing: border-box;
	flex: 1 1 15rem;
	min-width: 0;
	padding: 0.9rem 1rem;
	font-size: var(--wp--preset--font-size--medium);
	font-family: inherit;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--border-dark);
	border-radius: 2px;
}
.su-form textarea {
	width: 100%;
	resize: vertical;
	line-height: 1.55;
}
.su-form input[type="email"]:focus,
.su-form input[type="text"]:focus,
.su-form textarea:focus {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}

/* ---- Stacked form (the contact page) ----
   The opt-in is one field and a button on one line, so .su-form is a wrap-happy row.
   A three-field form on that layout would put labels and controls wherever the flex
   line broke, so the contact form switches the axis and gives every field its own
   block. Labels are visible here, not visually hidden: a placeholder is enough of a
   hint for a single "your email" box and is not enough for three fields. */
.su-form-stacked {
	flex-direction: column;
	align-items: stretch;
	gap: 1.1rem;
	max-width: none;
}
.su-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	width: 100%;
}
/* The control rules above carry flex: 1 1 15rem, which is right on the opt-in's single
   ROW of controls. .su-field is a COLUMN, so that basis resolves against the height and
   every field rendered 15rem tall. Reset the flex here and let the box size itself:
   rows="6" for the textarea, one line for the inputs. The selector has to reach
   .su-form-stacked to outrank .su-form input[type="text"], which is a class plus an
   attribute; .su-field input alone loses that on specificity, not on order. */
.su-form-stacked .su-field input,
.su-form-stacked .su-field textarea {
	flex: 0 0 auto;
	width: 100%;
}
.su-field label {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.01em;
}
.su-form-stacked button {
	align-self: flex-start;
}
/* The status region under a stacked form takes the form's measure, not the 30rem
   cap, for the same reason .su-signup-panel does. */
.su-form-stacked + .su-form-status {
	max-width: none;
}
.su-form button {
	flex: 0 0 auto;
	padding: 0.9rem 1.6rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--accent-1);
	border: 0;
	border-radius: 2px;
	cursor: pointer;
}
.su-form button:hover,
.su-form button:focus {
	background-color: var(--wp--preset--color--base);
}

/* ---- Section rhythm ---- */
.su-section + .su-section {
	border-top: 1px solid var(--wp--preset--color--border-light);
}

/* ---- Visually hidden label ---- */
.su-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---- Hero ---- */
/* Constrained layouts centre any child that sets its own max-width, so the
   measure limits below have to reset the auto margins or the left edge goes ragged. */
/* Core's constrained layout centres every child with auto margins (declared
   !important), so anything given a narrower measure drifts off the column's left
   edge. Re-create the column offset instead of fighting it, and collapse to zero
   once the viewport is narrower than the content size. */
.su-hero:not(.su-hero-split) h1,
.su-hero:not(.su-hero-split) .su-lede {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-right: auto !important;
}
.su-hero:not(.su-hero-split) h1 {
	max-width: 18ch;
}
.su-hero:not(.su-hero-split) .su-lede {
	max-width: 46ch;
}

/* The split hero fills its band instead of sitting in a 760px column with the
   right half empty. Its own columns carry the measure, so no margin trickery and
   no max-width: core stacks the columns below 782px on its own. */
.su-hero-split .wp-block-columns {
	width: 100%;
}
.su-hero-split h1 {
	margin-top: 0;
}

/* A bordered panel on a dark band. Same hairline as .su-card, opposite ground. */
.su-panel {
	border: 1px solid var(--wp--preset--color--border-light);
}
.su-dark .su-panel {
	border-color: var(--wp--preset--color--border-dark);
}

/* Book cover. Width is set on the block; these keep it inside its column, and
   below the columns breakpoint it sits under the text at a smaller size. */
.su-cover {
	margin: 0;
}
.su-cover img {
	max-width: 100%;
	height: auto;
}
@media (max-width: 781px) {
	.su-cover img {
		width: 220px !important;
	}
}

/* ---- Bands meet the header and footer with no seam of page ground ---- */
.wp-site-blocks > main {
	margin-block-start: 0 !important;
}
.wp-site-blocks > .wp-block-template-part {
	margin-block-start: 0;
}

/* The legal line sits under the two footer columns, so it follows their left
   edge instead of the narrower content column it would otherwise centre in. */
.su-footer .su-legal > p {
	max-width: none !important;
	margin-left: 0 !important;
}

/* The footer blurb ran to three lines with "in." alone on the last one (owner
   review, 2026-09-09: the same complaint as the hero h1). Its column went from
   22rem to 24rem in parts/footer.html, which is wide enough for two lines on its
   own; balance is what makes those two lines even (about 345px and 351px) instead
   of a greedy 375 + 321. Balance only ever moves words on this one two-line
   paragraph: it is not safe on headings, where it pulls a word down, and it is
   not set anywhere else. The link column beside it stays at 22rem. */
.su-footer .su-blurb {
	text-wrap: balance;
}

/* ---- Notify form: honeypot and status region ---- */
/* The honeypot is a real text input parked off screen. type="hidden" would not
   help: bots fill those too. Off screen, out of the tab order, no autocomplete. */
.su-hp {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.su-form-status {
	max-width: 30rem;
	margin: 0.6rem 0 0;
	padding: 0.65rem 0 0.65rem 0.9rem;
	font-size: var(--wp--preset--font-size--medium);
	border-left: 4px solid transparent;
}
.su-form-status:empty {
	display: none;
}
/* Light ground defaults. */
.su-form-status.is-success {
	color: var(--wp--preset--color--accent-2);
	border-left-color: var(--wp--preset--color--accent-2);
}
.su-form-status.is-error {
	color: var(--wp--preset--color--warning);
	border-left-color: var(--wp--preset--color--warning);
}
/* On the ink band the deep blue and the burnt red both fall under contrast, so
   swap in the dark-ground accent and lift the error to copper-weight ivory. */
.su-dark .su-form-status.is-success {
	color: var(--wp--preset--color--accent-1);
	border-left-color: var(--wp--preset--color--accent-1);
}
.su-dark .su-form-status.is-error {
	color: var(--wp--preset--color--accent-3);
	border-left-color: var(--wp--preset--color--accent-3);
}

.su-form button[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* ---- Band measure (added 2026-09-09, his "sits in the middle" note) ----
   Every su-section band now carries contentSize 1200px so all bands share one
   left edge. Prose would run 1200px wide at that width, so cap the measure on
   the band's DIRECT children only, and kill core's auto margins so the text
   stays on the left edge instead of centring inside the band. Children of
   columns and cards are already narrow and are deliberately not matched. */
.su-section > h2,
.su-section > h3,
.su-section > p,
.su-section > ul,
.su-section > ol {
	max-width: 68ch;
	/* Core gives every child of a constrained band max-width + auto margins, so a
	   narrower measure centres instead of sitting on the band's left edge. The
	   cards and hero (max-width 1200px) land at (100% - 1200px) / 2, so put the
	   prose on that same offset rather than at the padding edge, or the page ends
	   up with two different left edges. Collapses to 0 below 1200px. */
	margin-left: max(0px, calc((100% - 1200px) / 2)) !important;
	margin-right: auto !important;
}
.su-section > p.su-kicker {
	max-width: none;
}
/* A note that CLOSES a card row belongs to the row, not to the band's prose measure.
   At 1440px the row runs the full 1200px and a 68ch note under it wraps at roughly two
   thirds of that, leaving the right third of the band empty, which is the exact thing
   the band system exists to prevent. Reported on /founding-reviewers/ 2026-09-17.
   Deliberately opt-in: ordinary band prose still wants the 68ch measure. */
.su-section > p.su-band-note {
	/* 1200px, NOT `none`: the band's padding box is wider than the 1200px the card row
	   is constrained to, so `none` overshoots the row's right edge by ~65px at 1440 and
	   the note no longer lines up with the thing it is a note on. Matching the row's own
	   max-width, on the offset the rule above already applies, lands both edges together.
	   Collapses to the full width below 1200px, where the row does the same. */
	max-width: 1200px;
}

/* ---- Band types (established 2026-09-09) ----
   Every band on the site is one of three shapes, so no band is left with a third
   of its width empty:

     split      copy in one column, a panel or media in the other. The class on
                the panel column is .su-panel; the hero and the signup use it.
     editorial  a heading spanning the measure, body in two columns beneath it.
                The class on the band is .su-editorial. Use it for prose-only
                bands, which is what the old flush-left-in-a-1200px-band bands
                were, and what the owner read as an empty right half.
     grid       two or three cards or columns of equal weight, .su-card.

   Nothing below sets a width. Core's columns already fill the band, which is the
   point: the fix is choosing the right block, not adding another margin hack. */
.su-editorial .wp-block-column > *:first-child {
	margin-block-start: 0;
}

/* ---- Signup panel ----
   The form lives in the band's panel column now rather than loose on a full
   width band, so it takes the panel's measure instead of the 30rem cap that
   suited the old layout, and the fine print underneath gets real air. The 0.35rem
   on .su-note was the "text below form is congested" note in the owner's review. */
.su-signup-panel .su-form,
.su-signup-panel .su-form-status {
	max-width: none;
}
.su-signup-panel .su-note {
	margin-top: 1.75rem;
}
/* On the about page the panel carries the "what lands" checklist above the form, so
   the form needs the same air under the list that the fine print gets under the form.
   The panel's own 0.9rem blockGap is right for the list items and much too tight here. */
.su-signup-panel .su-checklist + .su-form {
	margin-top: 1.75rem;
}

/* ---- Drift log entry cards (added 2026-09-09, the entry measure note) ----
   Every log entry is a .su-card sitting straight in a 1200px band, so its body
   ran about 1100px a line at 1440px. Nobody reads a measure that long. The
   "Band measure" block above already caps a band's own prose at 68ch, and the
   entry cards were the one place that cap could not reach, because the prose is
   two levels down.

   The fix is the shape, not a narrower band. Narrowing the card would move the
   left edge every band shares with the hero, which is the one thing the band
   system does not allow. So each entry is a split band in miniature: the date
   and severity kicker with the source line under it in a rail on the left, the
   heading and the prose in the column on the right. The width goes somewhere
   instead of being left empty, which is the whole point of the three shapes.

   The 70% column comes out around 756px inside the card, which is still 89
   characters, so the cap below is what actually lands the measure at 68ch, the
   same measure the band prose uses. Both parts earn their keep: the column
   holds the composition together, the cap makes the line readable.

   The markup is generated, in kit/tools/build_drift_log.py render_entry, so
   nothing here sets a width or an order: core stacks the columns below 782px on
   its own, and the rail is written first, so a stacked entry reads date and
   severity, then title, then body. */
.su-entry-body p {
	max-width: 68ch;
}
/* The rail is a stack of two facts, not a wrapped paragraph, so the source line
   gets more than the 0.9rem block gap under the kicker. */
.su-entry-meta .su-note {
	margin-block-start: 1.5rem;
}

/* ---- Footer navigation (his review 2026-09-09: "this looks too poor now") ----
   The row inherited `.su-dark a { color: accent-1 }` plus the browser's default
   underline, so six teal underlined links sat in a stack of noise, and at 22rem the
   sixth wrapped onto a line of its own. Links now read as ivory text at footer
   weight and only pick up colour and a rule on hover, which is what makes a footer
   look composed rather than like raw markup. The separators are dropped to the
   muted tone so the eye reads names, not punctuation. */
.su-footer-nav {
	color: var(--wp--preset--color--muted-dark);
	line-height: 1.9;
}
.su-footer-nav a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 1px;
	transition: color 0.12s linear, border-color 0.12s linear;
}
.su-footer-nav a:hover,
.su-footer-nav a:focus {
	color: var(--wp--preset--color--accent-1);
	border-bottom-color: currentColor;
}
.su-footer-nav span {
	margin: 0 0.15rem;
	opacity: 0.55;
}
.su-footer-mail a {
	color: var(--wp--preset--color--muted-dark);
}

/* ---- Header navigation (his review 2026-09-09: "menu looks too congested") ----
   Six top-level items at 1.75rem gap read as a wall. The gap moved to 2.75rem in
   parts/header.html; the rest is here.

   The submenu was the uglier half: it inherited `.su-dark a { color: accent-1 }` and
   the browser underline, so its two items rendered as teal underlined links sitting
   under white bold ones, which is why the dropdown looked like it belonged to a
   different site. Nav links are ivory, no underline, accent only on hover, one rule
   for the top level and the submenu alike. */
.su-header .wp-block-navigation-item__content {
	color: var(--wp--preset--color--base);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.su-header .wp-block-navigation-item__content:hover,
.su-header .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--accent-1);
	border-bottom-color: currentColor;
}
.su-header .wp-block-navigation__submenu-container {
	padding: 0.35rem 0;
	border: 1px solid var(--wp--preset--color--border-dark);
	background-color: var(--wp--preset--color--contrast);
}
/* The width has to out-specify WP core, which pins 200px from
   `.wp-block-navigation .has-child:not(.open-on-click):hover>.wp-block-navigation__submenu-container`
   -- five class-level selectors. A two-class rule silently lost, which is why both
   labels still wrapped ("Claude Code on real / codebases"). The longest label needs
   302px, so 19rem with nowrap. Matched at every state core styles, not just :hover. */
.su-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container,
.su-header .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
.su-header .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container {
	min-width: 19rem;
}
.su-header .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
	white-space: nowrap;
}
.su-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.6rem 1.15rem;
	border-bottom: 0;
}
.su-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.su-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	border-bottom: 0;
	background-color: rgba(255, 255, 255, 0.06);
}

/* ---- The lede role, made self-enforcing ----
   .su-kicker and .su-note carry their own size, so they cannot drift. .su-lede did
   not: its size lived only in a block attribute in page markup, which is exactly how
   a paragraph ends up 20px next to a 17px sibling. Pin it here so the role survives
   an edit that drops the attribute. The four roles now behave the same way. */
.su-lede {
	font-size: var(--wp--preset--font-size--large);
}

/* The forum pointer sits above the contact form inside the panel. Without this it
   crowds the first field, which is the same congestion he flagged on the signup panel. */
.su-signup-panel .su-muted + .su-form {
	margin-top: 1.5rem;
}

/* ---- In-page jumps (his review 2026-09-09) ----
   "I don't like these kinds of page jumps, this will make the other 2nd section skipped
   most times, and even if you have to add jumps anywhere you should give smooth scrolling
   instead of a sudden jump."

   The jump button that skipped a whole band is gone. The remaining anchors are real
   destinations, so they scroll rather than teleport, and the reader keeps their sense of
   where the page went.

   Guarded by prefers-reduced-motion: a long smooth scroll is a genuine problem for people
   with vestibular disorders, and it is also why this is not simply `html { scroll-behavior:
   smooth }` unconditionally. scroll-margin-top stops a target landing flush against the
   top edge with its heading half under the viewport lip. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}
[id] {
	scroll-margin-top: 2rem;
}

/* Phone-only jump to the form on /founding-reviewers/. 2026-09-22: 97% of the Reddit ad
   traffic is on phones, where the columns stack and the form starts more than a screen
   down, so the first screen had no way to act. Above 781px (where core columns stop
   stacking) the form sits beside the headline and the button would be noise. */
@media (min-width: 782px) {
	body .wp-block-buttons.su-mobile-only {
		display: none;
	}
}