/* card #1330: core landing pages in the How it works visual language.
   Pages: /free-website-builder/, /free-website-for-small-business/, /google-maps-to-website/,
   /restaurant-website-builder/, /website-check/ and their DE/ES twins.
   Builds on /assets/hiw.css (read only) and adds .hlp-* rules, all scoped under .hlp
   (plus .hlp-toolhero / .hlp-wchero for the two tool heroes, which stay untouched inside).
   Rule of this file: the REST state is the complete diagram. Every animation lives under
   .is-live, which /assets/landing.js adds only while a diagram is on screen and motion is
   allowed. JS off, reduced motion, or off screen = the full, readable final picture. */

.hlp { --text-muted: rgba(235,235,235,0.6); }
.hlp svg:not([width]) { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hlp-hero .hiw-lead { margin-bottom: 32px; }
.hlp-tag { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 22px; }
.hlp-tag .hiw-eyebrow { margin: 0; }
.hlp-tag small { font-family: 'Space Grotesk', 'Space Grotesk Fallback'; font-size: 12px; color: var(--text-dim); letter-spacing: 0.04em; }

/* ================= shared diagram frame ================= */
.hlp-viz { position: relative; min-width: 0; }
.hlp-viz::before { content: ''; position: absolute; inset: 8% 6% -6%; z-index: -1; border-radius: 32px;
    background: radial-gradient(ellipse at 50% 60%, rgba(16,185,129,0.26), transparent 70%); filter: blur(30px); pointer-events: none; }
.hlp-card { position: relative; border-radius: 18px; border: 1px solid rgba(255,255,255,0.1); background: #0a0c0b;
    box-shadow: 0 40px 120px -30px rgba(0,0,0,0.9), 0 0 0 1px rgba(16,185,129,0.06) inset; overflow: hidden; }
.hlp-cap { display: flex; align-items: center; gap: 10px; font-family: 'Space Grotesk', 'Space Grotesk Fallback'; font-size: 11px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 12px; }
.hlp-cap i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); }
.is-live .hlp-cap i { animation: hiwPing 2.4s ease-out infinite; }

/* ================= A. Maps listing -> website (maps + restaurant heroes) ================= */
.hlp-x { display: grid; gap: 0; }
.hlp-src { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; padding: 16px 18px; }
.hlp-pin { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
    background: rgba(234,67,53,0.12); border: 1px solid rgba(234,67,53,0.35); color: #f87171; }
.hlp-pin svg { width: 24px; height: 24px; }
.hlp-src-txt { min-width: 0; display: grid; gap: 4px; }
.hlp-src-txt b { font-family: 'Space Grotesk', 'Space Grotesk Fallback'; font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.25; overflow-wrap: anywhere; }
.hlp-src-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12.5px; color: var(--text-dim); }
.hlp-src-meta .st { color: #facc15; letter-spacing: 1px; }
.hlp-src-meta .op { color: #34d399; }
.hlp-src-ph { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hlp-src-ph i { display: block; height: 34px; border-radius: 8px; background: linear-gradient(135deg, rgba(201,135,62,0.6), rgba(124,74,34,0.45)); }
.hlp-src-ph i:nth-child(2) { background: linear-gradient(135deg, rgba(250,204,21,0.45), rgba(180,83,9,0.45)); }
.hlp-src-ph i:nth-child(3) { background: linear-gradient(135deg, rgba(120,53,15,0.7), rgba(201,135,62,0.4)); }
.hlp-src-ph i:nth-child(4) { background: linear-gradient(135deg, rgba(16,185,129,0.35), rgba(6,78,59,0.5)); }
.hlp-src::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 40%; pointer-events: none; opacity: 0;
    background: linear-gradient(180deg, transparent, rgba(16,185,129,0.14), transparent); }
.is-live .hlp-src::after { animation: hlpScan 6s ease-in-out infinite; }
@keyframes hlpScan { 0% { opacity: 0; transform: translateY(-100%); } 10% { opacity: 1; } 40% { opacity: 1; transform: translateY(250%); } 45%, 100% { opacity: 0; transform: translateY(250%); } }

/* the beam: what travels from the listing to the site */
.hlp-beam { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 22px 0; }
.hlp-beam::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px;
    background: linear-gradient(180deg, rgba(16,185,129,0.15), rgba(16,185,129,0.7), rgba(16,185,129,0.15)); }
.hlp-chip { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px;
    font-family: 'Space Grotesk', 'Space Grotesk Fallback'; font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap;
    background: #0d100f; border: 1px solid rgba(16,185,129,0.35); }
.hlp-chip svg { width: 14px; height: 14px; color: var(--emerald); }
.is-live .hlp-chip { animation: hlpChip 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.45s); }
@keyframes hlpChip { 0%, 30%, 100% { background: #0d100f; box-shadow: none; }
    38%, 50% { background: rgba(16,185,129,0.18); box-shadow: 0 0 0 4px rgba(16,185,129,0.12), 0 0 22px rgba(16,185,129,0.45); } }
.hlp-pkt { position: absolute; left: 50%; top: 0; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; opacity: 0; z-index: 0;
    background: #6ee7b7; box-shadow: 0 0 14px 3px rgba(16,185,129,0.8); pointer-events: none; }
.is-live .hlp-pkt { animation: hlpPkt 2s cubic-bezier(.45,0,.55,1) infinite; }
.is-live .hlp-pkt.p2 { animation-delay: .7s; } .is-live .hlp-pkt.p3 { animation-delay: 1.4s; }
@keyframes hlpPkt { 0% { opacity: 0; top: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; top: calc(100% - 10px); } }

/* the generated website */
.hlp-bar { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,0.07); background: #0d100f; }
.hlp-dots { display: flex; gap: 6px; flex: none; }
.hlp-dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.14); }
.hlp-url { flex: 1; min-width: 0; height: 24px; border-radius: 8px; background: rgba(255,255,255,0.05); display: flex; align-items: center; gap: 6px; padding: 0 10px;
    font-family: 'Space Grotesk', 'Space Grotesk Fallback'; font-size: 11.5px; color: var(--emerald); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hlp-url svg { width: 11px; height: 11px; flex: none; }
.hlp-url span { overflow: hidden; text-overflow: ellipsis; }
.hlp-site { position: relative; padding: 12px 14px 14px; display: grid; gap: 10px; background: #0e1110; }
.hlp-site-hero { position: relative; border-radius: 12px; overflow: hidden; padding: 18px 18px 16px; display: grid; gap: 6px;
    background: radial-gradient(circle at 85% 15%, rgba(250,204,21,0.35), transparent 45%), linear-gradient(135deg, #3b2a1a 0%, #7c4a22 55%, #c9873e 100%); }
.hlp-site-hero b { font-family: 'Newsreader', 'Newsreader Fallback', serif; font-size: 21px; line-height: 1.1; color: #fff8ec; max-width: 78%; }
.hlp-site-hero span { font-size: 12px; color: rgba(255,248,236,0.9); }
.hlp-site-hero .st { color: #facc15; letter-spacing: 1px; }
.hlp-site-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.hlp-site-btns u { text-decoration: none; display: inline-block; padding: 5px 12px; border-radius: 999px; background: #fff8ec; color: #3b2a1a;
    font-family: 'Space Grotesk', 'Space Grotesk Fallback'; font-size: 11px; font-weight: 700; }
.hlp-site-btns u + u { background: rgba(255,248,236,0.16); color: #fff8ec; border: 1px solid rgba(255,248,236,0.45); }
.hlp-site-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hlp-site-row > div { min-width: 0; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); padding: 9px 10px;
    display: grid; gap: 4px; font-size: 11px; line-height: 1.35; color: var(--text-dim); }
.hlp-site-row > div b { font-family: 'Space Grotesk', 'Space Grotesk Fallback'; font-size: 11.5px; color: var(--text); font-weight: 700; overflow-wrap: anywhere; }
.hlp-menu { display: grid; gap: 0; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); padding: 6px 12px; }
.hlp-menu p { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 5px 0; font-size: 12.5px; color: var(--text); border-bottom: 1px dashed rgba(255,255,255,0.08); }
.hlp-menu p:last-child { border-bottom: 0; }
.hlp-menu p span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hlp-menu p b { font-family: 'Space Grotesk', 'Space Grotesk Fallback'; color: var(--emerald); font-weight: 700; }
.hlp-save { justify-self: end; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px;
    background: var(--emerald); color: var(--bg); font-family: 'Space Grotesk', 'Space Grotesk Fallback'; font-weight: 700; font-size: 12.5px; box-shadow: 0 10px 30px rgba(16,185,129,0.4); }
.hlp-save svg { width: 14px; height: 14px; stroke-width: 2.6; }
.hlp-site::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.09) 48%, transparent 66%); }
.is-live .hlp-site::after { animation: hlpShine 6s ease-in-out infinite; }
@keyframes hlpShine { 0%, 55% { opacity: 0; transform: translateX(-100%); } 60% { opacity: 1; } 80% { opacity: 1; transform: translateX(100%); } 85%, 100% { opacity: 0; transform: translateX(100%); } }
.is-live .hlp-save { animation: hlpPop 6s cubic-bezier(.16,1,.3,1) infinite; }
@keyframes hlpPop { 0%, 78%, 100% { transform: none; box-shadow: 0 10px 30px rgba(16,185,129,0.4); }
    84% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(16,185,129,0.16), 0 10px 40px rgba(16,185,129,0.6); } 90% { transform: none; } }

/* ================= B. receipt (free website for small business) ================= */
.hlp-rc { padding: 22px 22px 20px; background: linear-gradient(170deg, #0f1311, #0a0c0b 60%); }
.hlp-rc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px dashed rgba(255,255,255,0.14); }
.hlp-rc-head b { font-family: 'Newsreader', 'Newsreader Fallback', serif; font-size: 22px; color: var(--text); }
.hlp-rc-head span { font-family: 'Space Grotesk', 'Space Grotesk Fallback'; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.hlp-rc-list { list-style: none; margin: 0; padding: 6px 0; }
.hlp-rc-list li { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 10px 8px; border-radius: 8px;
    font-size: 14px; line-height: 1.4; color: var(--text); }
.hlp-rc-list li span { min-width: 0; }
.hlp-rc-list li b { flex: none; font-family: 'Space Grotesk', 'Space Grotesk Fallback'; font-weight: 700; color: var(--emerald); }
.is-live .hlp-rc-list li { animation: hlpRow 7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.6s); }
@keyframes hlpRow { 0%, 12%, 100% { background: transparent; } 4%, 8% { background: rgba(16,185,129,0.12); } }
.hlp-rc-total { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 8px 4px; border-top: 1px dashed rgba(255,255,255,0.14); }
.hlp-rc-total span { font-family: 'Space Grotesk', 'Space Grotesk Fallback'; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.hlp-rc-total b { font-family: 'Space Grotesk', 'Space Grotesk Fallback'; font-size: 34px; font-weight: 700; color: var(--emerald); letter-spacing: -0.02em; }
.hlp-stamp { position: absolute; right: 18px; top: 58px; transform: rotate(-9deg); padding: 6px 12px; border-radius: 8px;
    border: 2px solid rgba(16,185,129,0.75); color: #34d399; font-family: 'Space Grotesk', 'Space Grotesk Fallback'; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    background: rgba(5,5,5,0.7); }
.is-live .hlp-stamp { animation: hlpStamp 7s cubic-bezier(.16,1,.3,1) infinite; }
@keyframes hlpStamp { 0%, 52%, 100% { transform: rotate(-9deg); } 56% { transform: rotate(-9deg) scale(1.22); } 62% { transform: rotate(-9deg) scale(1); } }
.hlp-opt { margin-top: 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px;
    border: 1px solid rgba(16,185,129,0.28); background: rgba(16,185,129,0.06); }
.hlp-tgl { position: relative; width: 44px; height: 24px; border-radius: 999px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); }
.hlp-tgl i { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #d4d4d4; }
.is-live .hlp-tgl { animation: hlpTglBg 7s ease-in-out infinite; }
.is-live .hlp-tgl i { animation: hlpTgl 7s ease-in-out infinite; }
@keyframes hlpTgl { 0%, 66%, 100% { transform: none; background: #d4d4d4; } 72%, 92% { transform: translateX(20px); background: #fff; } }
@keyframes hlpTglBg { 0%, 66%, 100% { background: rgba(255,255,255,0.12); } 72%, 92% { background: var(--emerald); } }
.hlp-opt-txt { display: grid; gap: 2px; font-size: 13px; line-height: 1.45; color: var(--text-dim); }
.hlp-opt-txt b { font-family: 'Space Grotesk', 'Space Grotesk Fallback'; font-size: 14px; color: var(--text); }

/* ================= C. tool heroes (builder + website check) =================
   Only decorative layers are added; the form markup and scripts are untouched. */
.hlp-toolhero, .hlp-wchero { position: relative; isolation: isolate; }
.hlp-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
    -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, #000 35%, transparent 80%); mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, #000 35%, transparent 80%); }
.hlp-bg::before { content: ''; position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 56px 56px; }
.hlp-bg i { position: absolute; border-radius: 50%; filter: blur(60px); }
.hlp-bg i.a1 { width: 420px; height: 320px; top: -60px; right: -60px; background: radial-gradient(circle, rgba(16,185,129,0.32), transparent 65%); }
.hlp-bg i.a2 { width: 380px; height: 300px; top: 320px; left: -80px; background: radial-gradient(circle, rgba(52,211,153,0.18), transparent 65%); }
.hlp-bg.is-live i.a1 { animation: hiwDrift1 14s ease-in-out infinite alternate; }
.hlp-bg.is-live i.a2 { animation: hiwDrift2 18s ease-in-out infinite alternate; }

/* the "what happens next" strip under the builder form */
.hlp-next { position: relative; max-width: 680px; margin: 28px auto 0; }
.hlp-next ol { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hlp-next-rail { position: absolute; left: 16.6%; right: 16.6%; top: 21px; height: 2px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; }
.hlp-next-rail i { position: absolute; top: 0; left: 0; height: 2px; width: 30%; opacity: 0; background: linear-gradient(90deg, transparent, var(--emerald), transparent); }
.is-live .hlp-next-rail i { animation: hlpRailX 4.5s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes hlpRailX { 0% { opacity: 1; transform: translateX(-100%); } 100% { opacity: 1; transform: translateX(340%); } }
.hlp-next li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; text-align: center; }
.hlp-next li > span { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: #0d100f; border: 1px solid rgba(16,185,129,0.45); color: var(--emerald); }
.hlp-next li > span svg { width: 19px; height: 19px; }
.hlp-next li b { font-family: 'Space Grotesk', 'Space Grotesk Fallback'; font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.3; }
.hlp-next li small { font-size: 12.5px; color: var(--text-dim); line-height: 1.4; }
.is-live .hlp-next li > span, .hlp-next.is-live li > span { animation: hlpNode 4.5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 1.1s); }
@keyframes hlpNode { 0%, 40%, 100% { background: #0d100f; color: var(--emerald); box-shadow: none; }
    10%, 24% { background: var(--emerald); color: var(--bg); box-shadow: 0 0 0 6px rgba(16,185,129,0.14), 0 0 24px rgba(16,185,129,0.5); } }

/* ================= D. website check pipeline ================= */
.hlp-pipe { padding: 20px; display: grid; gap: 14px; }
.hlp-pipe-url { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(16,185,129,0.45);
    background: rgba(255,255,255,0.03); font-family: 'Space Grotesk', 'Space Grotesk Fallback'; font-size: 14px; color: var(--text); box-shadow: 0 0 0 3px rgba(16,185,129,0.1); }
.hlp-pipe-url svg { width: 16px; height: 16px; color: var(--emerald); flex: none; }
.hlp-lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hlp-lane { position: relative; overflow: hidden; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.025); padding: 12px; display: grid; gap: 8px; }
.hlp-lane b { font-family: 'Space Grotesk', 'Space Grotesk Fallback'; font-size: 12.5px; font-weight: 700; color: var(--text); line-height: 1.3; }
.hlp-lane p { display: flex; align-items: center; gap: 8px; margin: 0; }
.hlp-lane p i { flex: 1; height: 6px; border-radius: 4px; background: rgba(255,255,255,0.1); }
.hlp-lane p svg { width: 14px; height: 14px; color: var(--emerald); stroke-width: 2.6; flex: none; }
.hlp-lane::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; opacity: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(16,185,129,0.16), transparent); }
.is-live .hlp-lane::after { animation: hlpLane 3.2s ease-in-out infinite; }
.is-live .hlp-lane + .hlp-lane::after { animation-delay: 1.1s; }
@keyframes hlpLane { 0% { opacity: 1; transform: translateX(-100%); } 70%, 100% { opacity: 1; transform: translateX(260%); } }
.hlp-pipe-out { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.hlp-gauge { position: relative; width: 104px; height: 104px; }
.hlp-gauge svg { width: 104px; height: 104px; transform: rotate(-90deg); }
.hlp-gauge circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.hlp-gauge .tr { stroke: rgba(255,255,255,0.08); }
.hlp-gauge .fl { stroke: var(--emerald); stroke-dasharray: 251.3; stroke-dashoffset: 70.4; }
.hlp-gauge div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hlp-gauge div b { font-family: 'Space Grotesk', 'Space Grotesk Fallback'; font-size: 28px; font-weight: 700; color: var(--text); line-height: 1; }
.hlp-gauge div span { font-size: 10.5px; color: var(--text-dim); margin-top: 3px; }
.is-live .hlp-gauge { animation: hlpGlow 3.2s ease-in-out infinite; border-radius: 50%; }
@keyframes hlpGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } 50% { box-shadow: 0 0 34px 2px rgba(16,185,129,0.35); } }
.hlp-fixes { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.hlp-fixes li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; font-size: 12.5px; color: var(--text); line-height: 1.35;
    background: rgba(245,158,11,0.07); border: 1px solid rgba(245,158,11,0.22); }
.hlp-fixes li em { font-style: normal; font-family: 'Space Grotesk', 'Space Grotesk Fallback'; font-weight: 700; color: #fbbf24; flex: none; }
.is-live .hlp-fixes li { animation: hlpFix 4.8s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.4s); }
@keyframes hlpFix { 0%, 60%, 100% { transform: none; } 66% { transform: translateX(5px); } 72% { transform: none; } }
.hlp-wcx { padding-top: 24px; }

/* ================= E. step visuals inside timeline cards ================= */
.hlp-mini { margin-top: 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.08); background: #080a09; padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hlp-mini .hlp-chip { font-size: 11.5px; }
.hlp-mini .hlp-url { flex: 1 1 220px; height: 30px; }

/* ================= F. two-up compare cards (free vs own domain) ================= */
.hlp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.hlp-two .hiw-plan h3 { margin-bottom: 10px; }
.hlp-big { display: block; font-family: 'Space Grotesk', 'Space Grotesk Fallback'; font-size: 34px; font-weight: 700; color: var(--emerald); letter-spacing: -0.02em; margin-bottom: 18px; }
.hlp-big small { font-size: 15px; color: var(--text-dim); font-weight: 500; letter-spacing: 0; }

/* fit / not a fit and good-to-know lists reuse .hiw-checks / .hiw-xs */
.hlp-fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.hlp-fit .hiw-plan h3 { font-size: 22px; }
.hlp-prose { max-width: 860px; }
.hlp-prose p { font-size: 16px; line-height: 1.8; color: var(--text-dim); margin: 0 0 16px; }
.hlp-prose ol { margin: 0; padding: 0; list-style: none; counter-reset: hq; display: grid; gap: 12px; }
.hlp-prose ol li { counter-increment: hq; position: relative; padding: 18px 20px 18px 64px; border-radius: 16px; border: 1px solid var(--hiw-line);
    background: var(--hiw-card); font-size: 15px; line-height: 1.7; color: var(--text-dim); }
.hlp-prose ol li::before { content: counter(hq, decimal-leading-zero); position: absolute; left: 18px; top: 16px; width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', 'Space Grotesk Fallback'; font-size: 12px; font-weight: 700;
    color: var(--emerald); border: 1px solid rgba(16,185,129,0.35); background: rgba(16,185,129,0.08); }
.hlp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hlp-cards > div { border-radius: 20px; border: 1px solid var(--hiw-line); background: var(--hiw-card); padding: 24px; }
.hlp-cards h3 { font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif; font-weight: 700; font-size: 20px; line-height: 1.25; color: var(--text); margin: 0 0 10px; }
.hlp-cards p { font-size: 14.5px; line-height: 1.7; color: var(--text-dim); margin: 0; }
.hlp-note { font-size: 15px; line-height: 1.7; color: var(--text-dim); margin: 18px 0 0; max-width: 860px; }

/* stacked price table (free vs paid columns) */
.hlp .hiw-price-card.hlp-3col td:last-child, .hlp .hiw-price-card.hlp-3col th:last-child { text-align: left; }
.hlp .hiw-price-card.hlp-3col td { color: var(--text-dim); font-family: inherit; font-weight: 400; }
.hlp .hiw-price-card.hlp-3col td:first-child { color: var(--text); }
.hlp .hiw-price-card.hlp-3col td:nth-child(3) { color: var(--emerald); }

/* faq: a native <details> list that reads fine with every answer closed or open */
.hlp .hiw-faq details > p { padding: 0 24px 22px; }


/* free vs paid as two cards of label/value rows (replaces wide 3-column tables on phones) */
.hlp-dl { margin: 0; display: grid; gap: 0; }
.hlp-dl > div { display: grid; gap: 4px; padding: 13px 0; border-top: 1px solid var(--hiw-line); }
.hlp-dl > div:first-child { border-top: 0; padding-top: 0; }
.hlp-dl dt { font-family: 'Space Grotesk', 'Space Grotesk Fallback'; font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.hlp-dl dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text); }
.hlp-cards.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hlp-cards > div p strong { color: var(--text); }
.hlp-cards > div p + p { margin-top: 10px; }

/* worker B: small business + restaurant pages */
/* key facts as stats: long titles stack above their caption instead of one nowrap line */
.hlp .hiw-stats.hlp-kf .hiw-stat { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 13px 18px; }
.hlp .hiw-stats.hlp-kf .hiw-stat b { white-space: normal; min-width: 0; font-size: 19px; line-height: 1.25; }
/* receipt: keep the stamp clear of the first row's price */
.hlp-rcpt .hlp-rc-head { min-height: 44px; align-items: center; padding-right: 150px; }
.hlp-rcpt .hlp-stamp { top: 18px; bottom: auto; right: 20px; }
/* restaurant variant of the listing-to-website diagram */
.hlp-rest .hlp-site-hero { background: radial-gradient(circle at 85% 15%, rgba(251,146,60,0.4), transparent 45%), linear-gradient(135deg, #3a1410 0%, #8a2a1c 55%, #c2562f 100%); }
.hlp-rest .hlp-site-btns u:first-child { color: #3a1410; }
.hlp-rest .hlp-src-ph i:nth-child(1) { background: linear-gradient(135deg, rgba(220,38,38,0.55), rgba(124,45,18,0.5)); }
.hlp-rest .hlp-src-ph i:nth-child(2) { background: linear-gradient(135deg, rgba(250,204,21,0.45), rgba(194,65,12,0.45)); }
.hlp-rest .hlp-src-ph i:nth-child(4) { background: linear-gradient(135deg, rgba(132,204,22,0.35), rgba(54,83,20,0.55)); }
.hlp-rest .hlp-menu { padding: 4px 12px; }
/* what a restaurant site needs: icon cards, lit one after another while on screen */
.hlp-needs { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hlp-needs li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 18px; border-radius: 16px;
    border: 1px solid var(--hiw-line); background: var(--hiw-card); font-size: 15px; line-height: 1.6; color: var(--text-dim); }
.hlp-needs li strong { color: var(--text); }
.hlp-needs li > span { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); color: var(--emerald); }
.hlp-needs li > span svg { width: 19px; height: 19px; }
.is-live .hlp-needs li, .hlp-needs.is-live li { animation: hlpNeed 8.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 1.2s); }
.is-live .hlp-needs li > span, .hlp-needs.is-live li > span { animation: hlpNeedIco 8.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 1.2s); }
@keyframes hlpNeed { 0%, 14%, 100% { border-color: var(--hiw-line); box-shadow: none; }
    4%, 9% { border-color: rgba(16,185,129,0.45); box-shadow: 0 0 0 4px rgba(16,185,129,0.08), 0 18px 40px -20px rgba(16,185,129,0.5); } }
@keyframes hlpNeedIco { 0%, 14%, 100% { background: rgba(16,185,129,0.1); color: var(--emerald); }
    4%, 9% { background: var(--emerald); color: var(--bg); } }
.hlp-needs li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* worker C: tool pages (builder heroes sit outside .hlp, so their strip icons need their own stroke rule) */
.hlp-next svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hlp-bx .hlp-ansx { padding-top: 72px; }
.hlp-bx .hlp-ansx .hiw-answer { margin-top: 0; }
.hlp-wcx > .hiw-section { padding-top: 72px; border-top: 1px solid var(--hiw-line); }
.hlp-wcx .hiw-steps-side .hlp-viz { margin-top: 28px; }
.hlp-fixwrap { min-width: 0; display: grid; gap: 8px; }
.hlp-fixcap { font-family: 'Space Grotesk', 'Space Grotesk Fallback'; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.hlp-fixes li i { flex: 1; height: 6px; border-radius: 4px; background: rgba(245,158,11,0.28); }
.hlp-wcx-cta { margin-top: 28px; padding-left: 64px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.hlp-wcx-cta p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-dim); }
@media (max-width: 768px) {
    .hlp-bx .hlp-ansx { padding-top: 48px; }
    .hlp-wcx > .hiw-section { padding-top: 56px; }
    .hlp-wcx-cta { padding-left: 0; }
    .hlp-wcx-cta .hiw-btn { flex: 1 1 100%; justify-content: center; }
    .hlp-wcx-cta p { flex: 1 1 100%; text-align: center; }
    .hlp-fixwrap { width: 100%; }
}

/* ================= responsive ================= */
@media (max-width: 1024px) {
    .hlp-viz { max-width: 620px; }
    .hlp-cards { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    /* worker B */
    .hlp-needs { grid-template-columns: 1fr; }
    .hlp-needs li { padding: 14px 16px; font-size: 14.5px; }
    .hlp-rcpt .hlp-stamp { top: 16px; right: 12px; }
    .hlp-rcpt .hlp-rc-head { padding-right: 132px; }
    .hlp-two, .hlp-fit, .hlp-cards.c2 { grid-template-columns: 1fr; }
    .hlp-src { grid-template-columns: 44px minmax(0, 1fr); padding: 14px; gap: 12px; }
    .hlp-pin { width: 44px; height: 44px; }
    .hlp-src-ph i { height: 26px; }
    .hlp-site-hero b { font-size: 18px; }
    .hlp-site-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hlp-site-row > div:nth-child(3) { display: none; }
    .hlp-rc { padding: 18px 16px; }
    .hlp-rc-list li { font-size: 13.5px; padding: 9px 4px; }
    .hlp-rc-total b { font-size: 28px; }
    .hlp-stamp { top: 54px; right: 12px; font-size: 11px; }
    .hlp-lanes { grid-template-columns: 1fr; }
    .hlp-pipe-out { grid-template-columns: 1fr; justify-items: center; }
    .hlp-fixes { width: 100%; }
    .hlp-next li b { font-size: 12.5px; }
    .hlp-next li small { font-size: 11.5px; }
    .hlp-prose ol li { padding: 16px 16px 16px 58px; }
    .hlp-prose ol li::before { left: 14px; }
    .hlp-bg i.a1 { width: 300px; height: 240px; }
    .hlp-bg i.a2 { width: 260px; height: 220px; }
}

/* CLS: metric-matched fallback faces (same #792 set as the home page) so the web-font swap does not reflow the hero */
/* #792 CLS: metric-matched stand-ins for the above-the-fold web faces, so the swap from
   fallback to web font cannot move anything. One face per (family, weight, style) the hero
   actually uses, each pointing at the system face CSS weight-matching would really pick
   (>=600 resolves to the bold), with size-adjust from the shipped woff2 instanced at that
   exact weight and ascent/descent overrides from its own metrics. unicode-range is narrowed
   to what these pages use, which keeps U+2192 (the CTA arrow, absent from Inter's subset)
   resolving exactly as before. Full derivation + measurements: /root/qa792/DIAG.md. */
@font-face{font-family:'Inter Fallback';font-weight:400;unicode-range:U+0020-00FF,U+2000-206F,U+20AC,U+2122;src:local('Arial'),local('Liberation Sans'),local('Roboto');ascent-override:92.83%;descent-override:23.11%;line-gap-override:0.00%;size-adjust:104.36%}
@font-face{font-family:'Inter Fallback';font-weight:500;unicode-range:U+0020-00FF,U+2000-206F,U+20AC,U+2122;src:local('Arial'),local('Liberation Sans'),local('Roboto');ascent-override:91.67%;descent-override:22.82%;line-gap-override:0.00%;size-adjust:105.68%}
@font-face{font-family:'Inter Fallback';font-weight:600;unicode-range:U+0020-00FF,U+2000-206F,U+20AC,U+2122;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('Roboto Bold');ascent-override:95.16%;descent-override:23.69%;line-gap-override:0.00%;size-adjust:101.80%}
@font-face{font-family:'Inter Fallback';font-weight:700;unicode-range:U+0020-00FF,U+2000-206F,U+20AC,U+2122;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('Roboto Bold');ascent-override:93.99%;descent-override:23.40%;line-gap-override:0.00%;size-adjust:103.07%}
@font-face{font-family:'Newsreader Fallback';font-weight:400;unicode-range:U+0020-00FF,U+2000-206F,U+20AC,U+2122;src:local('Times New Roman'),local('Liberation Serif'),local('Tinos');ascent-override:70.35%;descent-override:25.36%;line-gap-override:0.00%;size-adjust:104.48%}
@font-face{font-family:'Newsreader Fallback';font-style:italic;font-weight:400;unicode-range:U+0020-00FF,U+2000-206F,U+20AC,U+2122;src:local('Times New Roman Italic'),local('TimesNewRomanPS-ItalicMT'),local('Liberation Serif Italic'),local('Tinos Italic');ascent-override:71.30%;descent-override:25.71%;line-gap-override:0.00%;size-adjust:103.08%}
@font-face{font-family:'Newsreader Fallback';font-weight:700;unicode-range:U+0020-00FF,U+2000-206F,U+20AC,U+2122;src:local('Times New Roman Bold'),local('TimesNewRomanPS-BoldMT'),local('Liberation Serif Bold'),local('Tinos Bold');ascent-override:69.24%;descent-override:24.97%;line-gap-override:0.00%;size-adjust:106.15%}
@font-face{font-family:'Space Grotesk Fallback';font-weight:400;unicode-range:U+0020-00FF,U+2000-206F,U+20AC,U+2122;src:local('Arial'),local('Liberation Sans'),local('Roboto');ascent-override:97.12%;descent-override:28.82%;line-gap-override:0.00%;size-adjust:101.32%}
@font-face{font-family:'Space Grotesk Fallback';font-weight:600;unicode-range:U+0020-00FF,U+2000-206F,U+20AC,U+2122;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('Roboto Bold');ascent-override:101.71%;descent-override:30.18%;line-gap-override:0.00%;size-adjust:96.75%}
@font-face{font-family:'Space Grotesk Fallback';font-weight:700;unicode-range:U+0020-00FF,U+2000-206F,U+20AC,U+2122;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('Roboto Bold');ascent-override:101.55%;descent-override:30.14%;line-gap-override:0.00%;size-adjust:96.89%}
.hlp { font-family: 'Inter', 'Inter Fallback', -apple-system, sans-serif; }
.hlp .hiw-hero h1, .hlp h2, .hlp em { font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif; }
.hlp .hiw-btn, .hlp .hiw-eyebrow, .hlp .hiw-label, .hlp .hiw-stat b { font-family: 'Space Grotesk', 'Space Grotesk Fallback'; }
.hlp-toolhero { font-family: 'Inter', 'Inter Fallback', -apple-system, sans-serif; }
.hlp-toolhero h1, .hlp-toolhero em { font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif; }

/* CLS: hiw.css anchors the 2nd hero glow to the bottom, so it moves whenever the hero grows (font swap, diagram); pin it to the top instead */
.hlp .hiw-hero .hiw-aurora.a2 { top: 380px; bottom: auto; }

/* imported hiw.css loops (aurora drift, eyebrow ping, answer border) run only while their block is on screen */
.hlp .hiw-hero:not(.is-live) .hiw-aurora, .hlp .hiw-hero:not(.is-live) .hiw-eyebrow i, .hlp .hiw-answer:not(.is-live) { animation-play-state: paused; }
/* in-page jumps (#wcUrl, #hero, step anchors) land below the fixed 73px nav */
.hlp [id], .hlp-toolhero, .hlp-toolhero [id], .hlp-wchero [id] { scroll-margin-top: 96px; }

/* reduced motion: hiw.css already stops every .hiw animation; the tool heroes are outside .hiw */
@media (prefers-reduced-motion: reduce) {
    .hlp-bg i, .hlp-toolhero *, .hlp-wchero .hlp-bg * { animation: none !important; }
    .hlp-next *, .hlp-next *::before, .hlp-next *::after { animation: none !important; }
}