/* Sharetru · Hero with plan ladder (2026). Theme tokens only. */
.pr26-hero { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(3rem, 2rem + 3vw, 5.5rem) var(--st-section); padding-inline: var(--st-inline); display: grid; gap: var(--st-gap-cols); align-items: start; background: var(--st-bg); font-family: var(--st-font); }
.pr26-hero > * { min-width: 0; }
.pr26-hero--washes::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(42rem 22rem at 100% 0%, color-mix(in srgb, var(--st-royal) 14%, transparent), transparent 70%), radial-gradient(32rem 18rem at 0% 100%, color-mix(in srgb, var(--st-green) 12%, transparent), transparent 70%); }
/* Background: "compliance" matches the st26_hero default on the Compliance template (same glow positions, sizes and dot grid), in theme tokens. */
.pr26-hero--bg-compliance { background: radial-gradient(900px 420px at 88% -8%, color-mix(in srgb, var(--st-aqua) 20%, transparent), transparent 60%), radial-gradient(700px 380px at 0% 108%, color-mix(in srgb, var(--st-royal) 16%, transparent), transparent 60%), var(--st-surface); border-bottom: 1px solid var(--st-line); }
.pr26-hero--bg-compliance::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(color-mix(in srgb, var(--st-accent) 16%, transparent) 1px, transparent 1.4px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(60% 75% at 72% 40%, #000 20%, transparent 72%); mask-image: radial-gradient(60% 75% at 72% 40%, #000 20%, transparent 72%); }
@media (min-width: 1000px) { .pr26-hero--7_5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .pr26-hero--6_6 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pr26-hero h1 { margin: 0 0 1rem; max-width: 16ch; }
.pr26-hero .st-lead { margin: 0 0 1.5rem; }
.pr26-hero__btns { margin: 0 0 1.75rem; }
.pr26-hero__rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.pr26-hero__rules li { position: relative; padding-left: 1.4rem; font-size: var(--st-fs-small); font-weight: 600; line-height: 1.5; color: var(--st-ink-soft); max-width: none; }
.pr26-hero__rules li::before { content: ""; position: absolute; left: 0.2rem; top: 0.5em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--st-green); box-shadow: 0 0 0 2px color-mix(in srgb, var(--st-green) 30%, transparent); }
/* the ladder */
.pr26-hero__ladder { margin: 0; display: grid; gap: var(--st-gap-card); }
.pr26-hero__rung { position: relative; display: grid; gap: 0.35rem; padding: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); border: 1px solid var(--st-line); border-radius: var(--st-radius-card); background: var(--st-surface); box-shadow: var(--st-shadow-card); text-decoration: none; color: inherit; transition: border-color var(--st-dur-fast) var(--st-ease), translate var(--st-dur-fast) var(--st-ease); }
.pr26-hero__rung:hover { border-color: var(--st-accent); translate: 0 -2px; }
.pr26-hero__rung:focus-visible { outline: 3px solid var(--st-focus); outline-offset: 3px; }
.pr26-hero__rung p { margin: 0; max-width: none; }
.pr26-hero__k { font-size: var(--st-fs-eyebrow); font-weight: 800; letter-spacing: var(--st-tracking-eyebrow); text-transform: uppercase; color: var(--st-accent-ink); }
.pr26-hero__name { font-size: var(--st-fs-h3); font-weight: 900; line-height: 1.2; letter-spacing: var(--st-tracking-heading); color: var(--st-heading); text-wrap: balance; }
.pr26-hero__price { display: grid; gap: 0.35rem; justify-items: start; }
.pr26-hero__price b { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: var(--st-heading); font-variant-numeric: tabular-nums; }
.pr26-hero__price span { font-size: var(--st-fs-small); color: var(--st-muted); font-weight: 600; }
.pr26-hero__line { margin-top: 0.25rem !important; font-size: var(--st-fs-small); color: var(--st-ink-soft); line-height: 1.5; }
.pr26-hero__line strong { color: var(--st-ink); }
.pr26-hero__rung--deep { background: var(--st-midnight); border-color: var(--st-midnight); color: var(--st-white); }
.pr26-hero__rung--deep .pr26-hero__k { color: var(--st-aqua); }
.pr26-hero__rung--deep .pr26-hero__name, .pr26-hero__rung--deep .pr26-hero__price b { color: var(--st-white); }
.pr26-hero__rung--deep .pr26-hero__price span, .pr26-hero__rung--deep .pr26-hero__line { color: var(--st-cloud); }
.pr26-hero__rung--deep .pr26-hero__line strong { color: var(--st-white); }
.pr26-hero__rung--deep:hover { border-color: var(--st-green); }
.pr26-hero__join { margin: -0.25rem 0; justify-self: center; font-size: var(--st-fs-fine); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--st-muted); }
/* the progress line: the brand gradient along the top edge, driven by the document's scroll */
.pr26-hero__progress { display: none; position: fixed; top: 0; left: 0; z-index: 1001; width: 100%; height: 3px; pointer-events: none; transform-origin: 0 50%; background: linear-gradient(90deg, var(--st-watermelon), var(--st-royal), var(--st-green)); }
@keyframes pr26-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { html:not([data-motion="off"]) .pr26-hero__progress { display: block; animation: pr26-progress linear both; animation-timeline: scroll(root); } } }