/**
 * Front-page hero (v4): template-parts/home-hero.php.
 * Follows the site theme: dark by default, light under html[data-theme="light"], each with its own real screenshots.
 * Everything is scoped to .sth; buttons and inputs restate every property Kadence sets.
 *
 * --u is the background's scale unit: 1px up to a 1440px-wide screen, then it grows with the width, so the
 * screenshot wall covers wide screens like a "cover" background and keeps the approved 1440px composition.
 */

.sth {
    --u: max(1px, calc(100vw / 1440));
    --sth-bg: #0a0a0a;
    --sth-rgb: 10, 10, 10;
    --sth-text: #f5f5f2;
    --sth-text2: #c4c4bd;
    --sth-muted: #9a9a93;
    --sth-gold: #f5c518;
    --sth-line2: #3d3d3d;
    --sth-panel: rgba(20, 20, 20, 0.88);
    --sth-field: #0a0a0a;
    --sth-drop: #161616;
    --sth-hover: #232323;
    --sth-chip: rgba(10, 10, 10, 0.6);
    --sth-btn: #f5c518;
    --sth-btn-text: #111111;
    --sth-shot-line: #2e3644;
    --sth-shot-bg: #1d2430;
    --sth-press-bg: rgba(13, 13, 13, 0.85);
    --sth-press-line: rgba(255, 255, 255, 0.06);
    --sth-press-text: #8f8f88;
    --sth-err: #fca5a5;
    --sth-ok: #34d399;
    --sth-shadow: rgba(0, 0, 0, 0.55);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 900px;
    padding-top: 85px; /* the fixed .pl-nav; at 1150px and below the body's own padding clears it */
    background: var(--sth-bg);
    color: var(--sth-text);
    font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
html[data-theme="light"] .sth {
    --sth-bg: #f5f5f5;
    --sth-rgb: 245, 245, 245;
    --sth-text: #1a1a1a;
    --sth-text2: #4a4a4a;
    --sth-muted: #6b6b6b;
    --sth-gold: #b8890a;
    --sth-line2: #d4d4d4;
    --sth-panel: rgba(255, 255, 255, 0.9);
    --sth-field: #ffffff;
    --sth-drop: #ffffff;
    --sth-hover: #f2f2f2;
    --sth-chip: rgba(255, 255, 255, 0.85);
    --sth-btn: #d4a10a;
    --sth-btn-text: #111111;
    --sth-shot-line: #d5dae1;
    --sth-shot-bg: #ffffff;
    --sth-op-light: 1.8; /* light screenshots are mostly white, so they need more strength to read */
    --sth-press-bg: rgba(255, 255, 255, 0.88);
    --sth-press-line: rgba(0, 0, 0, 0.07);
    --sth-press-text: #6b6b6b;
    --sth-err: #dc2626;
    --sth-ok: #16a34a;
    --sth-shadow: rgba(0, 0, 0, 0.12);
}
.sth *, .sth *::before, .sth *::after { box-sizing: border-box; }
.sth :where(h1, p, ul, form) { margin: 0; padding: 0; }
/* The theme colours and sizes every body p/li/span/div (and darkens them in light mode); the hero sets its own. */
.sth :where(p, li, span, div, strong, small) { color: inherit; font-size: inherit; }
.sth ul { list-style: none; }
.sth a { color: var(--sth-gold); text-decoration: none; }
.sth a:hover { color: var(--sth-text); }
.sth :focus-visible { outline: 3px solid var(--sth-gold); outline-offset: 3px; border-radius: 6px; }
.sth-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.sth-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sth-nb { display: inline-block; }
.sth-muted { color: var(--sth-muted); }

/* Background: real platform captures on a tilted wall, faded. The stage is the approved 1440x900 frame, scaled by --u and pinned to the top. */
.sth-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sth-stage { position: absolute; left: 50%; top: 0; width: calc(1440 * var(--u)); height: calc(900 * var(--u)); transform: translateX(-50%); }
.sth-wall {
    position: absolute; left: 50%; top: 50%;
    width: calc(2200 * var(--u)); height: calc(1700 * var(--u));
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(28 * var(--u)); align-items: start;
    transform: translate(-50%, -50%) perspective(calc(1800 * var(--u))) rotateX(24deg) rotateZ(-9deg) scale(1.08);
    transform-origin: 50% 50%;
}
.sth-col { display: flex; flex-direction: column; gap: calc(28 * var(--u)); }
.sth-col:nth-child(1) { margin-top: calc(60 * var(--u)); }
.sth-col:nth-child(2) { margin-top: calc(221 * var(--u)); }
.sth-col:nth-child(3) { margin-top: calc(500 * var(--u)); }
.sth-wall { opacity: var(--sth-op, 0.3); }
html[data-theme="light"] .sth-wall { opacity: min(1, calc(var(--sth-op, 0.3) * var(--sth-op-light))); }
/* Each panel's screenshot is a background: only the image for the current theme is downloaded. */
.sth-shot { border-radius: calc(14 * var(--u)); overflow: hidden; border: 1px solid var(--sth-shot-line); background: var(--sth-shot-bg) var(--sth-d) center top / cover no-repeat; box-shadow: 0 30px 80px var(--sth-shadow); }
html[data-theme="light"] .sth-shot { background-image: var(--sth-l); }
.sth-tracker { width: 130%; transform: translateX(calc(400 * var(--u))); }
.sth-heatmap { width: 82%; }
.sth-report { width: 125%; transform: translateX(calc(-128 * var(--u))); }
.sth-veil {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        radial-gradient(ellipse calc(820 * var(--u)) calc(560 * var(--u)) at 50% 50%, rgba(var(--sth-rgb), 0.94) 0%, rgba(var(--sth-rgb), 0.78) 45%, rgba(var(--sth-rgb), 0.35) 80%, rgba(var(--sth-rgb), 0.15) 100%),
        linear-gradient(180deg, rgba(var(--sth-rgb), 0.9) 0%, rgba(var(--sth-rgb), 0) 18%, rgba(var(--sth-rgb), 0) 80%, rgba(var(--sth-rgb), 0.95) 100%);
}
.sth-glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(calc(640 * var(--u)) calc(360 * var(--u)) at 50% 58%, rgba(245,197,24,0.10), rgba(245,197,24,0) 70%); }

/* Copy. Sizes grow with the screen above 1440px. */
.sth-main { position: relative; z-index: 3; flex: 1; display: flex; align-items: center; }
.sth-main > .sth-wrap { max-width: 1600px; text-align: center; padding-top: 40px; padding-bottom: 56px; }
.sth-eyebrow { text-wrap: balance; font-size: clamp(13px, 0.98vw, 16px); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sth-gold); }
.sth .sth-h1 { margin: 18px auto 0; max-width: 15.5em; text-wrap: balance; font-size: clamp(38px, 5vw, 92px); line-height: 1.03; font-weight: 400; letter-spacing: -0.015em; color: var(--sth-text); }
.sth .sth-h1 em { font-style: italic; color: var(--sth-gold); }
.sth-sub { margin: 20px auto 0 !important; max-width: 38em; text-wrap: balance; font-size: clamp(17px, 1.4vw, 25px); line-height: 1.55; color: var(--sth-text2); }

/* Form. Positioned above the proof block so the suggestion list opens over it. */
.sth-form { position: relative; z-index: 4; margin-top: 34px; }
.sth-lead { width: 100%; max-width: min(1000px, max(780px, 54vw)); margin: 0 auto; padding: 14px; border: 1px solid var(--sth-line2); border-radius: 18px; background: var(--sth-panel); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 30px 80px var(--sth-shadow); text-align: left; }
.sth-frow { display: flex; gap: 10px; flex-wrap: wrap; }
.sth-fwrap { position: relative; flex: 1 1 300px; min-width: 0; }
.sth-field { display: flex; align-items: center; gap: 12px; height: clamp(60px, 4.4vw, 72px); padding: 0 16px; border-radius: 12px; border: 1px solid var(--sth-line2); background: var(--sth-field); color: var(--sth-muted); }
.sth-field:focus-within { border-color: var(--sth-gold); }
.sth .sth-field input { flex: 1; min-width: 0; width: auto; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; outline: none; box-shadow: none; background: transparent; color: var(--sth-text); font-family: inherit; font-size: clamp(17px, 1.25vw, 21px); font-weight: 500; }
.sth .sth-field input::placeholder { color: var(--sth-muted); opacity: 1; }
/* Browser autofill paints its own pale background; keep the field's colours. */
.sth .sth-field input:-webkit-autofill,
.sth .sth-field input:-webkit-autofill:hover,
.sth .sth-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--sth-text);
    -webkit-box-shadow: 0 0 0 1000px var(--sth-field) inset;
    box-shadow: 0 0 0 1000px var(--sth-field) inset;
    caret-color: var(--sth-text);
    transition: background-color 600000s 0s;
}
.sth .sth-btn, .sth .sth-btn:hover, .sth .sth-btn:focus {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: clamp(60px, 4.4vw, 72px); margin: 0; padding: 0 28px; border: 0; border-radius: 12px; box-shadow: none;
    background: var(--sth-btn); color: var(--sth-btn-text);
    font-family: inherit; font-size: clamp(17px, 1.25vw, 21px); font-weight: 700; line-height: 1.2; letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer;
}
.sth .sth-btn:hover { filter: brightness(1.06); }
.sth .sth-btn:disabled { opacity: 0.7; cursor: wait; }
.sth-drop { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 8; max-height: 360px; overflow-y: auto; margin: 0; padding: 6px !important; border-radius: 12px; border: 1px solid var(--sth-line2); background: var(--sth-drop); box-shadow: 0 24px 60px var(--sth-shadow); }
.sth-drop .h3p-opt { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; border-radius: 8px; cursor: pointer; font-size: clamp(15px, 1.1vw, 18px); color: var(--sth-text); }
.sth-drop .h3p-opt[aria-selected="true"], .sth-drop .h3p-opt:hover { background: var(--sth-hover); }
.sth-drop .h3p-opt-t { min-width: 56px; font-weight: 700; color: var(--sth-gold); }
.sth-drop .h3p-opt-x { margin-left: auto; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--sth-muted); }
.sth-drop .h3p-opt-empty { padding: 12px; font-size: 14px; color: var(--sth-text2); }
.sth-picked { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 46px; padding: 4px 6px 4px 14px; margin-bottom: 10px; border-radius: 10px; background: var(--sth-field); border: 1px solid var(--sth-line2); font-size: clamp(15px, 1.1vw, 18px); }
.sth-picked-t { font-weight: 700; color: var(--sth-gold); }
.sth-picked-x { font-size: 12px; font-weight: 700; color: var(--sth-muted); }
.sth .sth-change, .sth .sth-change:hover { margin: 0 0 0 auto; min-height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--sth-line2); box-shadow: none; background: transparent; color: var(--sth-text); font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; text-transform: none; cursor: pointer; }
.sth .sth-change:hover { border-color: var(--sth-gold); }
.sth-incl { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 12px !important; padding: 0 4px !important; font-size: clamp(14px, 1.04vw, 17px); color: var(--sth-text2); }
.sth-incl li { display: flex; align-items: center; gap: 6px; margin: 0; }
.sth-incl svg { color: var(--sth-gold); flex: 0 0 auto; }
.sth-consent { margin: 12px 4px 0 !important; font-size: clamp(13px, 0.97vw, 16px); line-height: 1.5; color: var(--sth-muted); }
.sth-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.sth-msg { margin: 10px 4px 0 !important; font-size: clamp(14px, 1.04vw, 17px); color: var(--sth-err); }
.sth-msg a { font-weight: 700; }
.sth-done { display: flex; gap: 14px; align-items: flex-start; padding: 6px 4px; }
.sth-done-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; background: rgba(52,211,153,0.14); color: var(--sth-ok); }
.sth-done-title { font-weight: 700; font-size: clamp(18px, 1.32vw, 22px); color: var(--sth-text); }
.sth-done-text { margin-top: 6px !important; font-size: clamp(15px, 1.1vw, 18px); color: var(--sth-text2); }
.sth-done-join { margin-top: 12px !important; font-size: clamp(15px, 1.1vw, 18px); }
.sth-done-join a { font-weight: 700; }
.sth-quick { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; }
.sth-form:has([data-step="search"][hidden]) .sth-quick { display: none; }
.sth-quick-l { font-size: clamp(14px, 1.04vw, 17px); color: var(--sth-muted); margin-right: 2px; }
.sth .sth-tk, .sth .sth-tk:focus { min-height: clamp(40px, 2.9vw, 46px); margin: 0; padding: 0 16px; border-radius: 999px; border: 1px solid var(--sth-line2); box-shadow: none; background: var(--sth-chip); color: var(--sth-text); font-family: inherit; font-weight: 700; font-size: clamp(14px, 1vw, 16px); line-height: 1.2; letter-spacing: 0.03em; text-transform: none; cursor: pointer; }
.sth .sth-tk:hover { min-height: clamp(40px, 2.9vw, 46px); padding: 0 16px; border: 1px solid var(--sth-gold); box-shadow: none; background: var(--sth-chip); color: var(--sth-gold); }
.sth-fine { margin-top: 14px !important; font-size: clamp(14px, 0.97vw, 16px); line-height: 1.5; color: var(--sth-muted); }

/* Premium line and proof, on a patch of the background colour so the wall doesn't show through */
.sth-proof-bg { position: relative; }
.sth-proof-bg::before { content: ""; position: absolute; inset: -36px -160px -40px; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(var(--sth-rgb), 0.95) 0%, rgba(var(--sth-rgb), 0.88) 55%, rgba(var(--sth-rgb), 0) 100%); }
.sth-join { text-wrap: balance; margin-top: 26px !important; font-size: clamp(17px, 1.2vw, 20px); }
.sth-join a { font-weight: 700; }
.sth-price { margin-top: 6px !important; font-size: clamp(15px, 1.04vw, 18px); color: var(--sth-muted); }
.sth-proof { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin-top: 24px; }
.sth-proof-dan { display: flex; align-items: center; gap: 12px; text-align: left; line-height: 1.35; }
.sth-proof-dan strong { display: block; font-size: clamp(15px, 1.04vw, 18px); font-weight: 700; color: var(--sth-text); }
.sth-proof-dan small { display: block; font-size: clamp(14px, 0.97vw, 16px); color: var(--sth-muted); }
.sth-avatar { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; background: #1d1d1d; border: 2px solid var(--sth-gold); }
.sth-avatar img { display: block; width: 70px; max-width: none; height: auto; margin-left: -13px; }
.sth-proof-div { width: 1px; height: 34px; background: var(--sth-line2); }
.sth a.sth-rating, .sth a.sth-rating:hover { display: flex; align-items: center; gap: 8px; color: var(--sth-text); font-size: clamp(15px, 1.04vw, 18px); }
.sth a.sth-rating:hover .sth-muted { color: var(--sth-text2); }

/* Press band */
.sth-press { position: relative; z-index: 3; border-top: 1px solid var(--sth-press-line); background: var(--sth-press-bg); }
.sth-press-in { max-width: 1680px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px clamp(18px, 1.6vw, 30px); min-height: 60px; padding-top: 10px; padding-bottom: 10px; color: var(--sth-press-text); font-weight: 600; font-size: clamp(14px, 0.97vw, 17px); white-space: nowrap; }
.sth-press-l { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sth-muted); }

@media (max-width: 1150px) {
    .sth { padding-top: 0; min-height: 780px; }
}
@media (max-width: 980px) {
    .sth { min-height: 0; }
}
@media (max-width: 560px) {
    .sth { --u: 0.6px; }
    .sth-wrap { padding: 0 18px; }
    .sth-main > .sth-wrap { padding-top: 32px; padding-bottom: 44px; }
    .sth-lead { padding: 12px; }
    .sth-frow .sth-btn { width: 100%; }
    .sth .sth-field input { font-size: 16px; }
    .sth-quick { gap: 6px; }
    .sth .sth-tk, .sth .sth-tk:focus, .sth .sth-tk:hover { padding: 0 12px; font-size: 13px; }
    .sth-eb-dot, .sth-quick-l, .sth-proof-div, .sth-press { display: none; }
    .sth-eb-2 { display: block; }
}
/* Small phones: room for the whole placeholder at the 16px iOS needs to avoid zooming */
@media (max-width: 380px) {
    .sth-wrap { padding: 0 14px; }
    .sth-lead { padding: 10px; }
    .sth-field { gap: 8px; padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .sth * { transition: none !important; animation: none !important; }
}