/*
 * Surge TCG — utility and native-control layer
 *
 * ---------------------------------------------------------------------------
 * THIS FILE IS STRICTLY ADDITIVE.
 * ---------------------------------------------------------------------------
 * surge-design.css owns all layout, colour, spacing and typography. It already
 * defines .set-tabs, .set-tab, .consent-label, .filter-select, .email-row and
 * .alerts-action. Nothing here may restate those — an earlier draft set
 * `.set-tabs{flex-wrap:wrap}` and silently overrode the design's
 * `overflow-x:auto`, turning the mobile set-tab strip from one scrolling row
 * into three stacked rows. Verified caught at 390/600/768px.
 *
 * Only two things belong in this file:
 *   1. Tailwind utilities the markup uses that the design never defined.
 *   2. Appearance resets native controls need, because the export used
 *      shadcn/Radix components whose look came from Tailwind utilities.
 *
 * Before adding a rule here, grep surge-design.css for the selector. If it is
 * already there, the rule does not belong in this file.
 */

/* --- 1. utilities the design never defined ---------------------------- */

/* Used 12x across the site for screen-reader-only labels. Without it, hidden
   accessibility text renders visibly and pushes layout around. Not optional. */
.surge-page .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border-width:0}

.surge-page.antialiased,.surge-page .antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

.surge-page .shrink-0{flex-shrink:0}

/* --- 2. native control appearance ------------------------------------- */
/* Size, colour and focus styling all come from surge-design.css. These rules
   only strip the browser's native chrome and supply the indicator glyphs that
   the Radix components previously drew as inline SVG. */

/* <select> replacing the shadcn Select. .filter-select supplies the box. */
.surge-page select.filter-select{
	-webkit-appearance:none;appearance:none;
	padding:8px 34px 8px 12px;cursor:pointer;
	background-repeat:no-repeat;background-position:right 11px center;background-size:13px;
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4aec5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.surge-page select.filter-select:disabled{cursor:not-allowed;opacity:.5}
/* Native dropdown lists are painted by the OS and ignore most styling; set
   the two properties that are honoured so the list is not white-on-white. */
.surge-page select.filter-select option{background:#14151d;color:#cac6d7}

/* Set tabs: the visible control is the <label>, which surge-design.css styles
   and gives a :focus-within ring. The input stays in the accessibility tree
   and focusable — visually-hidden, never display:none. */
.surge-page .set-tab input[type="radio"]{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}

/* Consent checkbox replacing the shadcn Checkbox. surge-design.css styles
   .consent-label itself, including its flex layout and gap. */
.surge-page .consent-label input[type="checkbox"]{
	-webkit-appearance:none;appearance:none;
	width:16px;height:16px;flex-shrink:0;margin-top:3px;
	border:1px solid var(--border);border-radius:4px;
	background:transparent;cursor:pointer;
	transition:box-shadow .15s,border-color .15s,background-color .15s;
}
.surge-page .consent-label input[type="checkbox"]:checked{
	border-color:var(--primary);background-color:var(--primary);
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23060c0d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:center;background-size:11px;
}
.surge-page .consent-label input[type="checkbox"]:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(0,245,255,.5)}
.surge-page .consent-label input[type="checkbox"]:disabled{cursor:not-allowed;opacity:.5}

/* --- 3. WPForms output, restyled to the design ------------------------ */
/*
 * The stock-alerts and unsubscribe pages render the real WPForms forms (95
 * and 243) so consent recording, spam protection and the existing subscriber
 * workflow keep working. WPForms owns its own markup and class names, so the
 * design's .alerts-action / .email-row / .email-label rules never match it.
 *
 * SPECIFICITY NOTE — read before simplifying these selectors.
 * wpforms-full.min.css loads AFTER the theme's stylesheets and styles its
 * inputs with, for example:
 *     div.wpforms-container-full .wpforms-form input[type="email"]   (0,3,2)
 * A natural-looking rule like
 *     .surge-page .signup-card input[type="email"]                   (0,3,1)
 * loses on both specificity and source order, and the field renders white on
 * white. So every rule below deliberately carries the same
 * div.wpforms-container-full .wpforms-form context, which lifts it to (0,5,2)
 * and wins regardless of load order. Do not "tidy" that context away.
 *
 * Scoped to .surge-page and to the two cards, so WPForms elsewhere on the
 * site - including the existing pages - is completely untouched.
 */

.surge-page .signup-card div.wpforms-container-full,
.surge-page .unsubscribe-card div.wpforms-container-full{margin:0;padding:0}

.surge-page .signup-card div.wpforms-container-full .wpforms-form,
.surge-page .unsubscribe-card div.wpforms-container-full .wpforms-form{
	display:flex;flex-direction:column;align-items:flex-start;gap:14px
}

.surge-page .signup-card div.wpforms-container-full .wpforms-form .wpforms-field,
.surge-page .unsubscribe-card div.wpforms-container-full .wpforms-form .wpforms-field{padding:0;width:100%}

/* Field label - matches .email-label */
.surge-page .signup-card div.wpforms-container-full .wpforms-form .wpforms-field-label,
.surge-page .unsubscribe-card div.wpforms-container-full .wpforms-form .wpforms-field-label{
	display:block;font-size:14px;font-weight:500;line-height:1.55;color:#e1d7e9;margin:0 0 8px
}
.surge-page .signup-card div.wpforms-container-full .wpforms-form .wpforms-required-label,
.surge-page .unsubscribe-card div.wpforms-container-full .wpforms-form .wpforms-required-label{color:var(--pink)}

/* Email input - matches .email-row input */
.surge-page .signup-card div.wpforms-container-full .wpforms-form input[type="email"],
.surge-page .signup-card div.wpforms-container-full .wpforms-form input[type="text"],
.surge-page .unsubscribe-card div.wpforms-container-full .wpforms-form input[type="email"],
.surge-page .unsubscribe-card div.wpforms-container-full .wpforms-form input[type="text"]{
	width:100%;max-width:none;min-height:50px;
	background-color:#0c0e13;border:1px solid #363441;border-radius:4px;
	padding:12px 14px;font-size:14px;color:var(--foreground);box-shadow:none
}
/*
 * iOS Safari zooms the whole page in when a text field smaller than 16px
 * receives focus, and does not zoom back out. 16px on touch pointers stops
 * that; mouse-driven desktop keeps the 14px of the original design.
 * Same selector as the rule above, so this wins on source order alone -
 * keep it immediately after it. See the specificity note in this section.
 */
@media (max-width:767px),(pointer:coarse){
	.surge-page .signup-card div.wpforms-container-full .wpforms-form input[type="email"],
	.surge-page .signup-card div.wpforms-container-full .wpforms-form input[type="text"],
	.surge-page .unsubscribe-card div.wpforms-container-full .wpforms-form input[type="email"],
	.surge-page .unsubscribe-card div.wpforms-container-full .wpforms-form input[type="text"]{
		font-size:16px
	}
}
.surge-page .signup-card div.wpforms-container-full .wpforms-form input[type="email"]::placeholder,
.surge-page .unsubscribe-card div.wpforms-container-full .wpforms-form input[type="email"]::placeholder{color:#7d7490}
.surge-page .signup-card div.wpforms-container-full .wpforms-form input[type="email"]:focus,
.surge-page .unsubscribe-card div.wpforms-container-full .wpforms-form input[type="email"]:focus{
	outline:none;border-color:var(--cyan);box-shadow:0 0 0 2px #00f5ff30
}

/* Consent checkbox - matches .consent-label */
.surge-page .signup-card div.wpforms-container-full .wpforms-form .wpforms-field-checkbox ul{
	display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none
}
.surge-page .signup-card div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li{
	display:flex;align-items:flex-start;gap:12px;margin:0
}
.surge-page .signup-card div.wpforms-container-full .wpforms-form .wpforms-field-checkbox label{
	font-size:12px;line-height:1.7;color:#b3a8bd;cursor:pointer
}
.surge-page .signup-card div.wpforms-container-full .wpforms-form .wpforms-field-checkbox input[type="checkbox"]{
	-webkit-appearance:none;appearance:none;
	width:16px;height:16px;flex-shrink:0;margin:3px 0 0;
	border:1px solid var(--border);border-radius:4px;background-color:transparent;cursor:pointer
}
.surge-page .signup-card div.wpforms-container-full .wpforms-form .wpforms-field-checkbox input[type="checkbox"]:checked{
	border-color:var(--primary);background-color:var(--primary);
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23060c0d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:center;background-size:11px
}

/* Submit - matches .button.pink / .button */
.surge-page .signup-card div.wpforms-container-full .wpforms-form .wpforms-submit-container,
.surge-page .unsubscribe-card div.wpforms-container-full .wpforms-form .wpforms-submit-container{padding:0;width:100%}

.surge-page .signup-card div.wpforms-container-full .wpforms-form button[type="submit"],
.surge-page .unsubscribe-card div.wpforms-container-full .wpforms-form button[type="submit"]{
	display:inline-flex;align-items:center;justify-content:center;gap:12px;
	min-height:50px;padding:12px 16px;border-radius:4px;
	font-size:14px;font-weight:600;letter-spacing:-.01em;cursor:pointer;
	border:1px solid var(--border);background-color:#292c39;color:var(--foreground);
	transition:background-color .15s,border-color .15s,color .15s
}
.surge-page .signup-card div.wpforms-container-full .wpforms-form button[type="submit"]{
	background-color:var(--pink);border-color:var(--pink);color:#fff
}
.surge-page .signup-card div.wpforms-container-full .wpforms-form button[type="submit"]:hover{filter:brightness(1.08)}
.surge-page .unsubscribe-card div.wpforms-container-full .wpforms-form button[type="submit"]:hover{border-color:#9292a0}
.surge-page .signup-card div.wpforms-container-full .wpforms-form button[type="submit"]:focus-visible,
.surge-page .unsubscribe-card div.wpforms-container-full .wpforms-form button[type="submit"]:focus-visible{
	outline:2px solid var(--cyan);outline-offset:3px
}

/* Errors and confirmation */
.surge-page .signup-card div.wpforms-container-full .wpforms-form .wpforms-error,
.surge-page .unsubscribe-card div.wpforms-container-full .wpforms-form .wpforms-error{
	/* A lighter tint of --pink (#ff2d78). On the card background #20222d the
	   brand pink measures 4.44:1, just under WCAG AA 4.5:1 for this 13px
	   text; #ff6b9d measures 5.90:1, and 6.7-7.5:1 on the darker page
	   backgrounds. Error text only - the brand token itself is unchanged. */
	color:#ff6b9d;font-size:13px;margin-top:6px
}
.surge-page .signup-card div.wpforms-container-full .wpforms-confirmation-container-full,
.surge-page .unsubscribe-card div.wpforms-container-full .wpforms-confirmation-container-full{
	background-color:#151720;border:1px solid var(--border);border-radius:6px;
	padding:18px;color:var(--foreground);margin:0
}

/* --- 4. Catalogue additions ------------------------------------------- */
/*
 * Two elements the WordPress catalogue has that the export did not. The
 * export filtered in React state; this one is a real GET form, so it needs a
 * no-JS submit button, and its empty-state icon is an element rather than an
 * inline style attribute.
 */

/* Visible only when JavaScript is unavailable — with the script running the
   form submits on change and an Apply button would be clutter. */
.surge-page .filter-apply{margin:0 0 26px}

/* The export wrote this as style="margin:0 auto 15px" on the svg itself. */
.surge-page .empty-state .empty-icon{margin:0 auto 15px}

/* The form wrapper is a layout no-op: it exists so each filter state is a
   real URL. Declared explicitly so it can never introduce spacing of its own. */
.surge-page .catalogue-form{display:contents}

/* --- 4. Responsive corrections ---------------------------------------- */
/*
 * Faults found by the breakpoint audit. These exist in the v7 design too -
 * verified against the original export, which overflows identically - so
 * they are corrections, not regressions from the migration. They live here
 * rather than in surge-design.css so that file stays a verbatim copy of the
 * design and these can be reverted by deleting one block.
 */

/*
 * The third fanned card on a set page escapes the viewport.
 *
 * .set-feature-card.card-2 is translateX(12%) rotate(19deg), which pushes it
 * right of its container at every width. The design adds overflow:hidden to
 * .set-page-art only below 600px - the author knew about it, but guarded the
 * mobile case alone. At 1024px the page gains a horizontal scrollbar and the
 * card is cut off by the window edge instead of the container.
 *
 * Measured: document scrollWidth 1034px against a 1024px viewport, on both
 * this build and the original export.
 *
 * overflow-x:clip rather than overflow:hidden, so the cards keep their
 * downward box-shadow (0 20px 40px) while being stopped horizontally.
 * overflow:hidden here would also make the container a scroll port and
 * flatten that shadow at the edges.
 */
.surge-page .set-page-art{overflow-x:clip}

/*
 * Legacy background override.
 *
 * mu-plugins/surge-tweaks.php prints, from wp_footer:
 *
 *   html, body, #page, .site, #content, .site-content, #primary, .content-area,
 *   .site-main, main, article, .ast-container, .entry-content
 *   { background-color: #06030A !important; }
 *
 * The redesign's own background is #090a0d and carries no !important, so it
 * loses. surge-legacy-frontend-scope.php is supposed to strip that block, but
 * it is emitted into a nested output buffer that closes after ours, so the
 * strip cannot reach it reliably.
 *
 * Rather than depend on output-buffer ordering, this wins on the cascade and
 * cannot be defeated by hook timing: every selector below is more specific
 * than the bare element selectors above (body.surge-page is (0,1,1) against
 * body's (0,0,1)) and carries !important too, so it takes precedence whether
 * the legacy block is stripped or not.
 *
 * Scoped to .surge-page throughout, so no other page on the site is affected.
 */
body.surge-page,
body.surge-page main,
body.surge-page article,
body.surge-page .ast-container,
body.surge-page .entry-content{background-color:var(--background)!important}

/*
 * The root element cannot carry .surge-page, so it is matched through the
 * body instead. Only visible during overscroll bounce, but the legacy
 * #06030A shows there otherwise.
 */
html:has(body.surge-page){background-color:var(--background)!important}

/*
 * Feedback panel without a buyer quote.
 *
 * .feedback-panel is a two-column grid and .feedback-numbers carries a right
 * border, so with no quote the panel renders half empty with a dangling
 * divider. Nothing on this site stores a real quote, and one must never be
 * invented, so the panel collapses to a single column until a real one is
 * supplied through the surge_buyer_quote filter.
 */
.surge-page .feedback-panel.no-story{grid-template-columns:1fr}
.surge-page .feedback-panel.no-story .feedback-numbers{border-right:0;padding-right:0}

/*
 * Signup / unsubscribe submit button, matched to the design.
 *
 * The export renders the card's action as:
 *
 *   .signup-card .email-row .button { width:100%; justify-content:space-between }
 *
 * i.e. a full-width pink button with its label at the left and an arrow at
 * the right. WPForms renders a plain auto-width button with no icon, which is
 * why the live form did not match. Width and alignment are set here, and the
 * arrow is supplied as a ::after mask so no markup change is needed.
 */
.surge-page .signup-card div.wpforms-container-full .wpforms-form button[type="submit"],
.surge-page .unsubscribe-card div.wpforms-container-full .wpforms-form button[type="submit"]{
	width:100%;justify-content:space-between;text-align:left
}
.surge-page .signup-card div.wpforms-container-full .wpforms-form button[type="submit"]::after,
.surge-page .unsubscribe-card div.wpforms-container-full .wpforms-form button[type="submit"]::after{
	content:"";width:18px;height:18px;flex-shrink:0;background-color:currentColor;
	-webkit-mask:var(--surge-arrow) center/contain no-repeat;
	mask:var(--surge-arrow) center/contain no-repeat
}
.surge-page{
	--surge-arrow:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E")
}

/* The card's closing note, as .alerts-action small in the design. */
.surge-page .signup-card > .muted,
.surge-page .unsubscribe-card > .muted{font-size:12px;color:#aaa0b6;margin-top:4px}
.surge-page .signup-card > .muted a,
.surge-page .unsubscribe-card > .muted a{text-decoration:underline}

/*
 * WPForms wraps its fields in .wpforms-field-container. The form above is a
 * column flex box with align-items:flex-start (matching the design's
 * .alerts-action), which makes that wrapper shrink to fit its content - so
 * the input's width:100% resolved against a box narrower than the card.
 * The design gives its equivalent .email-row an explicit width:100%; this is
 * the same instruction applied to WPForms' own wrapper.
 */
.surge-page .signup-card div.wpforms-container-full .wpforms-form .wpforms-field-container,
.surge-page .unsubscribe-card div.wpforms-container-full .wpforms-form .wpforms-field-container{width:100%}

/* ═══════════════════════════════════════════════════════════════════════
   TRUST SECTION — approved Concept 3, "Small shop. Serious care."
   Approved 2 October 2026. Built from the full-size mockup.

   It lives here rather than in surge-design.css because WR1 changes that
   file: keeping this one out of it means the two patches never touch the
   same stylesheet and can be reviewed and reverted independently.

   Every figure in it comes from the verified seller-statistics source and
   may be absent. Nothing here assumes a figure exists, and no decorative
   element is focusable or exposed to assistive technology.
   ═══════════════════════════════════════════════════════════════════════ */

.surge-page .buyer-confidence { padding-top: 14px; }

.surge-page .trust3 {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 20px;
    background: #05080D;
    padding: 62px 62px 54px;
    /* The visible hairline. The gradient edge below sits on top of it, so a
       browser without mask support still gets a defined panel rather than a
       shape that bleeds into the page background. */
    border: 1px solid #ffffff14;
}

/* Edge lighting: cyan at the top left, magenta down the right. Drawn as a
   1px gradient ring with a mask so it follows the radius exactly. */
.surge-page .trust3-edge {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background:
        linear-gradient(118deg,
            rgba(0, 245, 255, .85) 0%,
            rgba(0, 245, 255, .10) 17%,
            rgba(255, 255, 255, .04) 46%,
            rgba(255, 45, 120, .70) 78%,
            rgba(255, 45, 120, .95) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

/* The two textured diagonals. Fine diagonal hatching inside a clipped
   triangle, with a brighter hairline along the cut. */
.surge-page .trust3-diagonal {
    position: absolute;
    top: 0;
    width: 230px;
    height: 230px;
    pointer-events: none;
    z-index: 1;
    background-image: repeating-linear-gradient(
        118deg,
        rgba(255, 255, 255, .055) 0 1px,
        transparent 1px 7px);
}

.surge-page .trust3-diagonal--left {
    left: 0;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    border-left: 1px solid rgba(0, 245, 255, .22);
}

.surge-page .trust3-diagonal--right {
    right: 0;
    clip-path: polygon(100% 0, 100% 100%, 0 0);
    background-image:
        repeating-linear-gradient(62deg,
            rgba(255, 255, 255, .055) 0 1px,
            transparent 1px 7px),
        linear-gradient(205deg, rgba(255, 45, 120, .18), transparent 62%);
}

/* The brand label, upper right. */
.surge-page .trust3-brand {
    position: absolute;
    top: 34px;
    right: 42px;
    z-index: 3;
    margin: 0;
    text-align: right;
    font-family: 'IBM Plex Mono', monospace;
    line-height: 1.55;
}

.surge-page .trust3-brand-name,
.surge-page .trust3-brand-sub {
    display: block;
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.surge-page .trust3-brand-name { color: #f7f7fa; font-weight: 500; }
.surge-page .trust3-brand-sub  { color: var(--muted-foreground); }

.surge-page .trust3-brand-rule {
    display: block;
    width: 46px;
    height: 2px;
    margin: 12px 0 0 auto;
    border-radius: 2px;
    background: var(--pink);
}

/* Two balanced columns, separated by a fine vertical rule. */
.surge-page .trust3-grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
    gap: 66px;
    align-items: center;
    margin-top: 46px;
}

.surge-page .trust3-figures {
    border-left: 1px solid #ffffff1a;
    padding-left: 64px;
    min-width: 0;
}

/* ── left column ─────────────────────────────────────────────────────── */

.surge-page .trust3-heading {
    margin: 0;
    font-size: clamp(40px, 4.86vw, 70px);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1.02;
}

.surge-page .trust3-heading-line { display: block; color: #ffffff; }
.surge-page .trust3-heading-line--accent { color: var(--cyan); }

.surge-page .trust3-underline {
    display: block;
    width: 92px;
    height: 5px;
    margin: 28px 0 0;
    border-radius: 3px;
    background: var(--pink);
}

.surge-page .trust3-copy {
    margin: 30px 0 0;
    max-width: 30ch;
    font-size: clamp(17px, 1.53vw, 22px);
    line-height: 1.5;
    color: #b6afd6;
}

.surge-page .trust3-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 26px;
    margin: 40px 0 0;
}

.surge-page .trust3-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 6px 2px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 15px;
    letter-spacing: .01em;
    color: #f7f7fa;
    border-bottom: 1px solid var(--cyan);
    transition: color 130ms ease, border-color 130ms ease;
}

.surge-page .trust3-link svg { width: 15px; height: 15px; color: var(--cyan); flex-shrink: 0; }
.surge-page .trust3-link:hover { color: var(--cyan); }
.surge-page .trust3-link:hover svg { color: #f7f7fa; }

.surge-page .trust3-link-divider {
    width: 1px;
    height: 26px;
    background: #ffffff26;
}

/* ── right column ────────────────────────────────────────────────────── */

.surge-page .trust3-primary-value {
    margin: 0;
    font-size: clamp(64px, 7.9vw, 116px);
    font-weight: 700;
    letter-spacing: -.055em;
    line-height: .96;
    color: var(--cyan);
}

.surge-page .trust3-primary-label {
    margin: 10px 0 0;
    font-size: clamp(17px, 1.46vw, 21px);
    color: #f7f7fa;
}

.surge-page .trust3-divider {
    display: block;
    height: 1px;
    margin: 30px 0;
    background: #ffffff1a;
}

.surge-page .trust3-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin: 0;
}

.surge-page .trust3-pair--single { grid-template-columns: 1fr; }

/* The term comes first in the markup, which is what a definition list means and
   what a screen reader announces. The design puts the figure above its label, so
   the pair is reversed HERE, visually, rather than by writing the list upside
   down. The same technique the Sales panel already uses. */
.surge-page .trust3-pair-item {
    display: flex;
    flex-direction: column-reverse;
    padding-right: 30px;
    min-width: 0;
}
.surge-page .trust3-pair-item + .trust3-pair-item {
    border-left: 1px solid #ffffff1a;
    padding-left: 36px;
    padding-right: 0;
}

.surge-page .trust3-pair-value {
    margin: 0;
    font-size: clamp(38px, 4.15vw, 62px);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1;
    color: #ffffff;
}

.surge-page .trust3-pair-label {
    margin: 9px 0 0;   /* reversed column: this sits BELOW the figure */
    font-size: clamp(15px, 1.32vw, 19px);
    color: #f7f7fa;
}

.surge-page .trust3-unavailable {
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
    color: #b6afd6;
    max-width: 28ch;
}

.surge-page .trust3-checked {
    margin: 34px 0 0;
    text-align: right;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    letter-spacing: .015em;
    color: #b6afd6;
}

/* ── narrower widths ─────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .surge-page .trust3 { padding: 46px 40px 40px; }
    .surge-page .trust3-grid { gap: 44px; margin-top: 40px; }
    .surge-page .trust3-figures { padding-left: 44px; }
}

/* One column. Reading order is heading, copy, the primary figure, the pair,
   then the links - which is the order the two-column layout reads in too. */
@media (max-width: 880px) {
    .surge-page .trust3 { padding: 40px 30px 34px; border-radius: 16px; }
    .surge-page .trust3-brand { position: static; text-align: left; }
    .surge-page .trust3-brand-rule { margin-left: 0; }
    .surge-page .trust3-grid {
        grid-template-columns: 1fr;
        gap: 34px;
        margin-top: 30px;
    }
    .surge-page .trust3-figures {
        border-left: 0;
        border-top: 1px solid #ffffff1a;
        padding-left: 0;
        padding-top: 34px;
    }
    .surge-page .trust3-copy { max-width: none; }
    .surge-page .trust3-checked { text-align: left; }
    .surge-page .trust3-diagonal { width: 150px; height: 150px; }
}

/* Once the two links stack, the rule between them is a mark in mid-air. */
@media (max-width: 620px) {
    .surge-page .trust3-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .surge-page .trust3-link-divider { display: none; }
}

@media (max-width: 520px) {
    .surge-page .trust3 { padding: 32px 22px 28px; }
    .surge-page .trust3-heading { font-size: 38px; }
    .surge-page .trust3-copy { font-size: 16px; margin-top: 24px; }
    .surge-page .trust3-links { gap: 0 18px; margin-top: 30px; }
    .surge-page .trust3-link { font-size: 13px; gap: 9px; }
    .surge-page .trust3-primary-value { font-size: 62px; }
    .surge-page .trust3-pair-item { padding-right: 18px; }
    .surge-page .trust3-pair-item + .trust3-pair-item { padding-left: 22px; }
    .surge-page .trust3-pair-value { font-size: 34px; }
    .surge-page .trust3-pair-label { font-size: 14px; }
    .surge-page .trust3-diagonal { width: 110px; height: 110px; }
}

@media (prefers-reduced-motion: reduce) {
    .surge-page .trust3-link { transition: none; }
}