/* Comparison panel — ink band: the pitch on one side, a compact verdict grid on
   the other. Colours for the verdict pills are the ones the full comparison
   table uses, re-mixed for a dark background: at the table's opacities they
   disappeared over the ink. */

/* ---------- the seam above the band ---------- */
/* The approved layout draws a hairline where this block starts: it is as wide
   as the text column, not as the window, and it fades out at both ends. The
   built-in "Hairline on top" is full-bleed and solid, so it cannot draw this
   one. The seam lives inside .wrap — that is what gives it the column's exact
   width at every breakpoint — and is then lifted back through the section's own
   top padding so it lands on the boundary between the two blocks, where the
   design puts it, instead of hanging just above the panel. */
.srweb .srw-cmp-seam {
	display: block;
	position: relative;
	height: 1px;
	/* Ink at 16%: the same wash the approved layout uses over a light page. */
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(36, 67, 120, .16) 14%,
		rgba(36, 67, 120, .16) 86%,
		transparent 100%);
	/* Its own pixel is given back so the panel below does not shift down. */
	margin-bottom: -1px;
}

/* ---------- the band ---------- */
.srweb .srw-cmp {
	position: relative;
	overflow: hidden;
	border-radius: var(--r-xl);
	color: #fff;
	background: linear-gradient(150deg, var(--c-ink), var(--c-ink-deep));
	padding: clamp(1.8rem, 4vw, 3.2rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
	gap: clamp(1.6rem, 3.4vw, 3rem);
	align-items: center;
	/* The approved layout sets the page body on a 1.55 line and lets this panel
	   inherit it; the shared sheet here runs on 1.5. Everything with a stated
	   line-height (the eyebrow, the heading, the copy, the criteria, the pills)
	   is unaffected — this only reaches what the design leaves inherited: the
	   column heads and the one-word verdicts, which came out a line shorter and
	   took a pixel off every row. Declared once here, as the mockup does. */
	line-height: 1.55;
}
/* Only one half left — every row deleted, or the whole pitch emptied: whichever
   survives takes the full width, instead of facing an empty column. */
.srweb .srw-cmp--solo { grid-template-columns: minmax(0, 1fr); }
.srweb .srw-cmp::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: rgba(34,211,238,.16); filter: blur(60px); top: -180px; right: -120px; pointer-events: none; }
/* Both columns sit above the glow, and neither may grow past its track. */
.srweb .srw-cmp > * { position: relative; z-index: 1; min-width: 0; }

/* ---------- left: the pitch ---------- */
/* On this band the eyebrow is a step larger than the site default — 1.05rem on
   a 1.6 line, with the eyebrow's own tracking — and it clears the heading by a
   full large step. That is what the approved layout shows, so it is stated here
   rather than left to whatever the shared eyebrow happens to be. */
.srweb .srw-cmp .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .8em;
	font-size: 1.05rem;
	line-height: 1.6;
	margin-bottom: var(--sp-lg);
	color: var(--c-glow);
}
/* The eyebrow's tick is orange everywhere else; on the ink band it goes cyan,
   which is the only accent that holds up against this background. As a flex
   item it is centred on the line and the gap above does the spacing, so the
   inline version's side margin and optical nudge would only push it off. */
.srweb .srw-cmp .eyebrow::before {
	background: var(--c-glow);
	flex: none;
	margin-right: 0;
	top: 0;
}
/* The heading level is an editor's choice (h1…h4), so the treatment is attached
   to the block, not to a level: whichever tag lands here looks the same. */
.srweb .srw-cmp-copy :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--font-display);
	font-weight: 700;
	color: #fff;
	font-size: clamp(1.75rem, 3.2vw, 2.7rem);
	letter-spacing: -.028em;
	line-height: 1.06;
	max-width: none;
	margin: var(--sp-md) 0;
}
.srweb .srw-cmp-copy :is(h1, h2, h3, h4, h5, h6) em { font-style: normal; color: var(--c-glow); }
.srweb .srw-cmp-txt { margin-bottom: var(--sp-lg); }
/* That gap belongs to the button below it. With no button the text is the last
   thing in the column, and the panel centres both halves: a margin left hanging
   there would push the whole pitch up off centre. */
.srweb .srw-cmp-txt:last-child { margin-bottom: 0; }
.srweb .srw-cmp-txt p { color: rgba(255,255,255,.8); font-size: 1.05rem; line-height: 1.6; max-width: 34em; margin: 0 0 var(--sp-md); }
.srweb .srw-cmp-txt p:last-child { margin-bottom: 0; }
.srweb .srw-cmp-txt :is(b, strong) { color: #fff; }
.srweb .srw-cmp-txt :is(ul, ol) { color: rgba(255,255,255,.8); margin: 0 0 var(--sp-md); padding-left: 1.2em; }
/* A link in body copy inherits the ink colour from base.css and goes invisible
   on this band, so it is restated state by state. */
.srweb .srw-cmp-txt a { color: #fff; border-bottom-color: var(--c-glow); }
.srweb .srw-cmp-txt a:hover, .srweb .srw-cmp-txt a:focus { color: var(--c-glow); border-bottom-color: var(--c-glow); }
/* The shared sheet gives anything whose class carries "btn" a 1.5 line as a
   defence against the host theme, and the shared radius token is 12px. The
   approved design has this button on a 1.2 line with a 14px radius — 4.8px
   shorter and two more pixels of round. Both are restated here, on this panel's
   button only: the token and the defensive rule serve four other published
   pages and are not ours to move.
   The label needs saying too. It is a flex item, so its own line box — and that
   class also carries "btn", so the same defensive rule caught it — is what sets
   the button's height: fixing only the button left it exactly as tall. */
.srweb .srw-cmp .btn { border-radius: 14px; }
.srweb .srw-cmp .btn,
.srweb .srw-cmp .btn .btn-lbl { line-height: 1.2; }
/* The host theme keeps button text on one line. This label is long — "Explore
   the complete comparison" — and on a phone that one line ran 39px past the
   column it sits in, where the band's own `overflow: hidden` cut the end off it.
   The approved design breaks it over two lines instead and keeps it inside. */
.srweb .srw-cmp .btn .btn-lbl { white-space: normal; min-width: 0; }
.srweb .srw-cmp .btn { max-width: 100%; }
.srweb .srw-cmp .btn-ghost { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.34); }
.srweb .srw-cmp .btn-ghost:hover, .srweb .srw-cmp .btn-ghost:focus { background: rgba(255,255,255,.12); border-color: var(--c-glow); }

/* ---------- right: the verdict grid ---------- */
.srweb .srw-cmp-art { min-width: 0; }
.srweb .srw-cmp-t { width: 100%; display: grid; gap: .15rem; }
/* Header and rows are independent grids, so every track is capped with
   minmax(0, …): an `fr` track grows to fit its content, and one long pill would
   otherwise widen ITS OWN row and leave the verdicts un-aligned down the table. */
.srweb .srw-cmp-h,
.srweb .srw-cmp-r {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.15fr) minmax(0, 1.15fr);
	gap: .9rem;
	align-items: center;
}

/* Header cells stretch to the row and the text sits on the bottom edge, so a
   one-line label and a two-line one still share the same underline. */
.srweb .srw-cmp-h { align-items: stretch; }
/* Direct children only: a column label is editable and may carry an <em> or a
   <span> of its own, and that inner one must not draw a second underline. */
.srweb .srw-cmp-h > span {
	display: flex;
	align-items: flex-end;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: .66rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255,255,255,.7);
	padding-bottom: .6rem;
	border-bottom: 1px solid rgba(255,255,255,.2);
}
/* The criteria column heads nothing: a rule there floated over the first
   criterion without belonging to it. */
.srweb .srw-cmp-h > span:first-child { border-bottom: 0; }
.srweb .srw-cmp-h > span.srw-cmp-col-ok { color: var(--c-glow); border-bottom-color: rgba(34,211,238,.55); }

.srweb .srw-cmp-r { padding: .62rem 0; border-bottom: 1px dashed rgba(255,255,255,.12); }
.srweb .srw-cmp-r:last-child { border-bottom: 0; }
.srweb .srw-cmp-c { font-size: .92rem; line-height: 1.4; color: rgba(223,234,248,.86); }

/* One-word verdict: the cell IS the pill. */
.srweb .srw-cmp-v { justify-self: start; min-width: 0; }
.srweb .srw-cmp-v--yes,
.srweb .srw-cmp-v--no,
.srweb .srw-cmp-v--mixed {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: .7rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .3em .8em;
	border-radius: var(--r-pill);
}
.srweb .srw-cmp-v--yes { color: #8ff0ff; background: rgba(34,211,238,.16); border: 1px solid rgba(34,211,238,.42); }
.srweb .srw-cmp-v--no { color: rgba(255,255,255,.62); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); }
.srweb .srw-cmp-v--mixed { color: rgba(255,255,255,.7); background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.28); }

/* Labelled pills: here the cell is only a container — no padding, no background,
   no border — or its box would offset these pills from the one-word verdicts
   stacked above them. */
.srweb .srw-cmp-r--pills .srw-cmp-v {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .4rem;
	padding: 0;
	background: none;
	border: 0;
	letter-spacing: normal;
}
.srweb .srw-cmp-pill {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: .72rem;
	padding: .38em .78em;
	border-radius: var(--r-pill);
	/* The rest of the table is set in small caps; the approved design shows these
	   pills in mixed case, as on the comparison page. */
	text-transform: none;
	letter-spacing: .01em;
	line-height: 1.15;
	text-align: left;
	max-width: 100%;
	/* Stated, not inherited: the client asked for these to break over two lines
	   rather than overflow, and a host theme that puts `nowrap` on its own pills
	   or badges would otherwise decide that for us. */
	white-space: normal;
}
.srweb .srw-cmp-pill--yes { background: rgba(16,185,129,.20); color: #7ff0c4; border: 1px solid rgba(16,185,129,.5); }
.srweb .srw-cmp-pill--no { background: rgba(239,71,87,.18); color: #ffb3ba; border: 1px solid rgba(239,71,87,.5); }
.srweb .srw-cmp-pill--mixed { background: rgba(255,255,255,.08); color: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.24); }
.srweb .srw-cmp-ico { width: 14px; height: 14px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.srweb .srw-cmp-pill--yes .srw-cmp-ico { background: #10b981; color: #fff; box-shadow: 0 0 0 3px rgba(16,185,129,.22); }
.srweb .srw-cmp-pill--no .srw-cmp-ico { background: #ef4757; color: #fff; box-shadow: 0 0 0 3px rgba(239,71,87,.22); }
.srweb .srw-cmp-pill--mixed .srw-cmp-ico { background: rgba(255,255,255,.4); color: var(--c-ink-deep); box-shadow: 0 0 0 3px rgba(255,255,255,.12); }
.srweb .srw-cmp-ico svg { width: 8px; height: 8px; }
/* The shared sheet puts a defensive line-height on anything whose class carries
   the word "pill", and that catches this label as well as the pill around it —
   so the label came out on a 1.5 line inside a pill set on a 1.15 one, and the
   pill grew about 3px taller than the approved design. Restated here. */
.srweb .srw-cmp-pill-lbl { min-width: 0; line-height: 1.15; }

/* ---------- narrower ---------- */
@media (max-width: 900px) {
	.srweb .srw-cmp { grid-template-columns: minmax(0, 1fr); }
}
/* The table lives in half the panel, so between roughly 900 and 1400px its
   verdict tracks fall short of the ~125px "High Reward" needs on one line. The
   criterion gives way — it wraps, as the client asked — and the pills wrap too
   rather than overlap. */
@media (max-width: 820px) {
	.srweb .srw-cmp-h,
	.srweb .srw-cmp-r { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.05fr); gap: .6rem; }
	.srweb .srw-cmp-c { font-size: .86rem; max-width: 12em; }
	.srweb .srw-cmp-pill { padding: .38em .62em; }
}
/* Phones: the criterion takes a little track back — the pills already break in
   two — and drops a step so the longest one still fits on one line. */
@media (max-width: 560px) {
	.srweb .srw-cmp-h,
	.srweb .srw-cmp-r { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr); gap: .55rem; }
	.srweb .srw-cmp-c { font-size: .82rem; max-width: none; }
	/* All four pills break the same way ("High / Reward", "High / Risk"…): a huge
	   word-spacing forces the break at the space, and a space left at the end of a
	   line collapses, so it leaves no visible gap. */
	.srweb .srw-cmp-pill { padding: .34em .55em; }
	.srweb .srw-cmp-pill-lbl { word-spacing: 100px; }
}


/* ---------- the section's own breathing room ----------
   The approved layout gives every section «padding: clamp(3.4rem, 7vw, 5.4rem)»
   of its own — 86px at a desktop width — and some of them open a little tighter,
   at «clamp(2.6rem, 5vw, 4rem)» = 64px. The Layout tab's spacing steps top out
   at 40px, so a section built only from those reads visibly more cramped than
   the design. The padding lives here, and those steps are then set to "None"
   in the page content so the two do not add up. */
.srweb .srw-cmp-sec { padding-block: clamp(3.4rem, 7vw, 5.4rem); }
.srweb .srw-cmp-sec--tight { padding-top: clamp(2.6rem, 5vw, 4rem); }


/* The seam sits inside .wrap, which the section's top padding has already
   pushed down, so it has to climb back exactly that far to land on the
   boundary between the blocks instead of just above the eyebrow. The travel
   is read from a custom property the padding sets, so the two can never
   drift apart: change one and the other follows. */
.srweb .srw-cmp-sec { --srw-seam-lift: clamp(3.4rem, 7vw, 5.4rem); }
.srweb .srw-cmp-sec--tight { --srw-seam-lift: clamp(2.6rem, 5vw, 4rem); }
.srweb .srw-cmp-seam { top: calc(-1 * var(--srw-seam-lift, 0px)); }