/*
 * Assess landing preview (Local only): the page's own layer over the homepage's (home.css .shh tokens, type, buttons,
 * badges, checklists; shj-base.css section head and bands; shj-thread.css the thread). Every selector starts with
 * ".shh.sha " or "body.sha-preview"; no --sh-* is defined. Breakpoints: 480, 640, 768, 1024.
 * Card language and values follow docs/SNEAKY-HOMEPAGE-V2-DESIGN-CONTRACT.md (§1 colours, §2 type, §6 buttons,
 * §11 cards: white on a tint, 1px soft line, long soft shadow, one level of boxing).
 */

/* ---------- page tokens: the hub's area tones (the contract's pillar fills) ---------- */
.shh.sha { --sha-assess: #246b5f; --sha-train: #2b8fd6; --sha-eat: #3d9442; --sha-helpers: #d6336c; --sha-learn: #b8740a; --sha-card-shadow: 0 30px 60px -44px rgba(18, 44, 58, .5); }
.shh.sha .sha-tone--assess { --sha-tone: var(--sha-assess); --sha-tone-text: #246b5f; --sha-tint: #e7f2ef; }
.shh.sha .sha-tone--train { --sha-tone: var(--sha-train); --sha-tone-text: #1b6fae; --sha-tint: #eaf4fd; }
.shh.sha .sha-tone--eat { --sha-tone: var(--sha-eat); --sha-tone-text: #2f7a34; --sha-tint: #eef7ec; }
.shh.sha .sha-tone--helpers { --sha-tone: var(--sha-helpers); --sha-tone-text: #b0285a; --sha-tint: #fdf0f5; }
.shh.sha .sha-tone--learn { --sha-tone: var(--sha-learn); --sha-tone-text: #8a5a06; --sha-tint: #fbf3e4; }

/* ---------- the hero (not numbered, no node; the thread starts at its foot) ---------- */
.shh.sha .sha-hero { position: relative; padding-block: clamp(36px, 5.5vw, 84px) clamp(48px, 6vw, 88px); background: radial-gradient(ellipse 60% 70% at 88% 18%, rgba(110, 196, 232, .2), rgba(110, 196, 232, 0) 70%), radial-gradient(ellipse 50% 60% at 6% 96%, rgba(63, 179, 157, .13), rgba(63, 179, 157, 0) 70%), #fff; }
.shh.sha .sha-hero-inner { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.shh.sha .sha-h1 { margin: .22em 0 0; max-width: 13ch; font: 800 clamp(2.25rem, 1rem + 4.6vw, 4.4rem)/.98 var(--shh-display); letter-spacing: -.035em; color: var(--shh-ink); text-wrap: balance; }
.shh.sha .sha-hero-lead { margin: 20px 0 0; max-width: 52ch; font: 400 clamp(1.05rem, .98rem + .3vw, 1.2rem)/1.6 var(--shh-text); color: var(--shh-copy); text-wrap: pretty; }
.shh.sha .sha-hero .shh-actions { margin-top: 26px; }

/* where to start: one light card with three honest paths */
.shh.sha .sha-start { align-self: center; padding: clamp(20px, 2.6vw, 30px); border-radius: 28px; background: #fff; border: 1px solid var(--shh-line-soft); box-shadow: var(--sha-card-shadow); }
.shh.sha .sha-start-k { margin: 0; font: 800 12px/1 var(--shh-text); letter-spacing: .11em; text-transform: uppercase; color: var(--shh-ink); }
.shh.sha .sha-paths { display: grid; gap: 20px; margin: 18px 0 0; padding: 0; list-style: none; }
.shh.sha .sha-path { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: start; margin: 0; }
.shh.sha .sha-path .shh-badge { width: 40px; height: 40px; }
.shh.sha .sha-path .shh-badge .shh-i { width: 21px; height: 21px; }
.shh.sha .sha-path + .sha-path { padding-top: 18px; border-top: 1px solid var(--shh-line-soft); }
.shh.sha .sha-path-t { margin: 0; font: 700 17px/1.25 var(--shh-display); letter-spacing: -.01em; color: var(--shh-ink); }
.shh.sha .sha-path-d { margin: 5px 0 0; font: 400 15px/1.5 var(--shh-text); color: var(--shh-copy); text-wrap: pretty; }
.shh.sha .sha-path-d a, .shh.sha .sha-area-set a { color: var(--shh-ink); font-weight: 650; text-decoration: underline; text-decoration-color: var(--shh-sky); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.shh.sha .sha-path-d a:hover, .shh.sha .sha-area-set a:hover { text-decoration-color: var(--shh-ink); }
.shh.sha .sha-pills { margin-top: 12px; }
.shh.sha .sha-path-btn { margin-top: 14px; }

/* phones and tablets: copy, then the starting choices, then the checklist; from 1024 the card sits beside both */
.shh.sha .sha-hero .sha-hero-can { margin-top: 0; }
.shh.sha .sha-path > .sha-pills { grid-column: 1 / -1; margin-top: 12px; }
@media (min-width: 480px) { .shh.sha .sha-path > .sha-pills { grid-column: 2; margin-top: 10px; } }
@media (min-width: 1024px) {
	.shh.sha .sha-hero-inner { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); grid-template-areas: "copy start" "can start"; column-gap: 64px; row-gap: 22px; align-items: center; }
	.shh.sha .sha-hero-copy { grid-area: copy; align-self: end; }
	.shh.sha .sha-start { grid-area: start; }
	.shh.sha .sha-hero .sha-hero-can { grid-area: can; align-self: start; }
}

/* ---------- the four sections: bands and rhythm ---------- */
.shh.sha .sha-sec { position: relative; padding-block: clamp(56px, 7vw, 96px) clamp(48px, 6vw, 88px); }
.shh.sha .sha-sec--choose { background: #fff; border-top: 1px solid var(--shh-line-soft); --shj-say: #246b5f; }
.shh.sha .sha-sec--result { background: linear-gradient(180deg, #f6fbfd 0%, #eaf5f2 100%); --shj-say: #246b5f; }
.shh.sha .sha-sec--next { background: #fff; border-top: 1px solid var(--shh-line-soft); --shj-say: #1b6fae; }
.shh.sha .sha-sec--progress { background: linear-gradient(180deg, #eef8fc 0%, #dff1f9 100%); --shj-say: #246b5f; }
.shh.sha .sha-sec .shj-head { margin-bottom: 30px; }
@media (min-width: 1024px) { .shh.sha .sha-sec .shj-head { margin-bottom: 40px; } }

/* ---------- 1. choose a check: six area cards, each with its real checks ---------- */
.shh.sha .sha-areas-wrap { outline: none; }
.shh.sha .sha-areas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.shh.sha .sha-area { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 20px 20px 18px; border-radius: 24px; background: #fff; border: 1px solid var(--shh-line-soft); box-shadow: 0 24px 48px -40px rgba(18, 44, 58, .45); }
.shh.sha .sha-area-head { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.shh.sha .sha-area-badge { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sha-tone); color: #fff; box-shadow: 0 0 0 5px var(--sha-tint); }
.shh.sha .sha-area-badge .sk-i { width: 22px; height: 22px; }
.shh.sha .sha-area-t { margin: 2px 0 0; font: 700 18px/1.2 var(--shh-display); letter-spacing: -.015em; color: var(--shh-ink); }
.shh.sha .sha-area-d { margin: 4px 0 0; font: 400 14px/1.45 var(--shh-text); color: var(--shh-muted); text-wrap: pretty; }
.shh.sha .sha-checks { margin: 14px 0 0; padding: 0; list-style: none; }
.shh.sha .sha-checks li { margin: 0; }
.shh.sha .sha-check { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; column-gap: 12px; align-items: center; min-height: 52px; margin: 0 -10px; padding: 9px 10px; border-radius: 12px; color: var(--shh-ink); text-decoration: none; transition: background-color .16s var(--shh-ease, ease); }
.shh.sha .sha-checks li + li .sha-check::before { content: ""; position: absolute; left: 10px; right: 10px; top: 0; border-top: 1px solid var(--shh-line-soft); }
.shh.sha .sha-check:hover::before, .shh.sha .sha-check:focus-visible::before, .shh.sha .sha-checks li:hover + li .sha-check::before { border-top-color: transparent; }
.shh.sha .sha-check:hover, .shh.sha .sha-check:focus-visible { background: var(--sha-tint); color: var(--shh-ink); }
.shh.sha .sha-check-main { display: grid; gap: 2px; min-width: 0; }
.shh.sha .sha-check-main strong { font: 650 15.5px/1.3 var(--shh-text); color: var(--shh-ink); }
.shh.sha .sha-check-main span { font: 400 13px/1.4 var(--shh-text); color: var(--shh-muted); text-wrap: pretty; }
.shh.sha .sha-check-time { font: 600 13px/1 var(--shh-text); color: var(--shh-copy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.shh.sha .sha-check-go { display: grid; place-items: center; color: var(--sha-tone-text); }
.shh.sha .sha-check-go .shh-i { width: 17px; height: 17px; transition: transform .16s var(--shh-ease, ease); }
.shh.sha .sha-check:hover .sha-check-go .shh-i, .shh.sha .sha-check:focus-visible .sha-check-go .shh-i { transform: translateX(2px); }
.shh.sha .sha-area-set { margin: auto 0 0; padding-top: 14px; font: 400 13.5px/1.5 var(--shh-text); color: var(--shh-copy); }
@media (min-width: 640px) { .shh.sha .sha-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .shh.sha .sha-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }

/* ---------- 2. your result: the layout of every result (placeholders only) and its order ---------- */
.shh.sha .sha-result-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.shh.sha .sha-example { padding: clamp(20px, 2.6vw, 30px); border-radius: 26px; background: #fff; border: 1px solid var(--shh-line-soft); box-shadow: var(--sha-card-shadow); }
.shh.sha .sha-example-k { display: flex; align-items: center; gap: 8px; margin: 0; font: 800 12px/1 var(--shh-text); letter-spacing: .11em; text-transform: uppercase; color: var(--shh-ink); }
.shh.sha .sha-example-k .shh-i { width: 16px; height: 16px; color: var(--sha-assess); }
.shh.sha .sha-example-result { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
/* a placeholder is a dashed token (the approved journey band's grammar), never a number */
.shh.sha .sha-token { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px dashed #6ec4e8; background: #edf8fc; font: 700 17px/1 var(--shh-display); color: #1b6fae; }
.shh.sha .sha-token--soft { min-height: 32px; padding: 0 12px; font: 600 13.5px/1 var(--shh-text); color: var(--shh-copy); border-color: #c7ddeb; background: #f6fbfd; }
.shh.sha .sha-ladder { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin-top: 30px; }
.shh.sha .sha-ladder-step { height: 12px; border-radius: 6px; background: #d5e8f1; }
.shh.sha .sha-ladder-step:nth-child(2) { background: #b5dbe3; }
.shh.sha .sha-ladder-step:nth-child(3) { background: #8ccbc4; }
.shh.sha .sha-ladder-step:nth-child(4) { background: #4fa89a; }
.shh.sha .sha-ladder-step:nth-child(5) { background: #246b5f; }
.shh.sha .sha-ladder-step.is-you { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--shh-ink); }
.shh.sha .sha-ladder-you { position: absolute; left: 70%; bottom: calc(100% + 8px); transform: translateX(-50%); font: 800 11px/1 var(--shh-text); letter-spacing: .1em; text-transform: uppercase; color: var(--shh-ink); }
.shh.sha .sha-ladder-note { margin: 12px 0 0; font: 400 14px/1.45 var(--shh-text); color: var(--shh-copy); }
.shh.sha .sha-example-limits { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--shh-line); font: 400 14px/1.45 var(--shh-text); color: var(--shh-copy); }
.shh.sha .sha-example-limits .shh-i { width: 16px; height: 16px; margin-top: 2px; color: var(--sha-assess); }
/* Hello Elementor's reset makes every figcaption 16px italic #333: the font shorthand restates it */
.shh.sha .sha-example figcaption { margin-top: 16px; font: 400 13px/1.45 var(--shh-text); font-style: normal; color: var(--shh-muted); }
.shh.sha .sha-order { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.shh.sha .sha-order li { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; align-items: start; margin: 0; }
.shh.sha .sha-order-i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 1px solid rgba(36, 107, 95, .18); color: var(--sha-assess); }
.shh.sha .sha-order-i .shh-i { width: 20px; height: 20px; }
.shh.sha .sha-order strong { display: block; font: 700 17px/1.3 var(--shh-display); letter-spacing: -.01em; color: var(--shh-ink); }
.shh.sha .sha-order small { display: block; margin-top: 3px; font: 400 15px/1.5 var(--shh-text); color: var(--shh-copy); text-wrap: pretty; }
@media (min-width: 1024px) {
	.shh.sha .sha-result-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; align-items: center; }
}

/* ---------- 3. what to do next: three doors into the rest of Sneaky ---------- */
.shh.sha .sha-nexts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.shh.sha .sha-next { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; margin: 0; padding: clamp(20px, 2.4vw, 28px); border-radius: 24px; background: #fff; border: 1px solid var(--shh-line-soft); box-shadow: 0 24px 48px -40px rgba(18, 44, 58, .45); }
.shh.sha .sha-next .shh-badge { width: 44px; height: 44px; }
.shh.sha .sha-next .shh-badge .shh-i { width: 22px; height: 22px; }
.shh.sha .sha-next-t { margin: 14px 0 0; font: 700 19px/1.2 var(--shh-display); letter-spacing: -.015em; color: var(--shh-ink); }
.shh.sha .sha-next p { margin: 8px 0 0; font: 400 15px/1.55 var(--shh-text); color: var(--shh-copy); text-wrap: pretty; }
.shh.sha .sha-next .sha-next-fine { font-size: 13.5px; color: var(--shh-muted); }
.shh.sha .sha-feeds { display: grid; gap: 6px; width: 100%; margin: 12px 0 0; padding: 12px 0 0; list-style: none; border-top: 1px dashed var(--shh-line); }
.shh.sha .sha-feeds li { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); gap: 10px; margin: 0; font: 400 13.5px/1.4 var(--shh-text); color: var(--shh-copy); }
.shh.sha .sha-feeds b { font-weight: 650; color: var(--shh-ink); }
.shh.sha .sha-next .shh-btn { margin-top: auto; }
.shh.sha .sha-next .sha-next-fine + .shh-btn { margin-top: 18px; }
@media (min-width: 1024px) { .shh.sha .sha-nexts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }

/* ---------- 4. track your progress ---------- */
.shh.sha .sha-progress-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: center; }
.shh.sha .sha-progress-note { margin: 12px 0 0; font: 400 14px/1.45 var(--shh-text); color: var(--shh-copy); }
.shh.sha .sha-sec--progress .shh-lead { color: var(--shh-copy); }
@media (min-width: 1024px) { .shh.sha .sha-progress-grid { grid-template-columns: minmax(0, 1fr) auto; column-gap: 56px; } }

/* ---------- motion: the homepage's reveal only (home.css gates it); nothing else moves ---------- */
@media (prefers-reduced-motion: reduce) {
	.shh.sha .sha-check, .shh.sha .sha-check-go .shh-i { transition: none; }
}
@media print { .shh.sha .sha-start { box-shadow: none; } }