/*
 * How it works (route "how", templates/how.php), 29 Sep 2026. Loaded after site.css by PA_Seo::open(page_css).
 * Phone first, the kit's tokens only. The engine flow in the hero, the watchlist console, the chart legend, the EA card
 * beside "No martingale", the numbered setup cards and the updates panel. No amber surface, no red, one green.
 */

/* icons: a line icon in a small lit tile */
.pa-hw-ic { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--pa-ink-3); box-shadow: inset 0 0 0 1px var(--pa-card-line); color: var(--pa-lit); }
.pa-hw-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* hero: the H1 fits 360 px phones on two lines ("Let the engine work." stays whole), 390 px and up as the kit's */
.pa-hw-hero .pa-hero__h1 { font-size: clamp(2.1rem, 1.2rem + 4.4vw, 4.4rem); }

/* hero: the engine flow (viewBox 0 10 1200 310) */
.pa-hw-flow { margin: clamp(14px, 1.4vw, 20px) 0 0; }
.pa-hw-art { position: relative; aspect-ratio: 1200 / 310; }
@media (max-width: 599px) { .pa-hw-art { margin-inline: calc(-1 * var(--pa-gutter)); } }
.pa-hw-art__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pa-hw-art__glass { position: absolute; left: 36.27%; top: 20.97%; width: 20%; filter: drop-shadow(0 10px 28px rgba(106, 162, 255, .3)); }
.pa-hw-lane { fill: none; stroke-width: 1.6; stroke-linecap: round; }
.pa-hw-lane--gold, .pa-hw-lane--btc { stroke-width: 2.4; }
.pa-hw-beam { fill: none; stroke: url(#pa-hw-beam); stroke-width: 3.5; stroke-linecap: round; }
.pa-hw-beam--halo { stroke-width: 18; opacity: .2; }
.pa-hw-hit { fill: rgba(60, 211, 238, .22); }
.pa-hw-grid { stroke: rgba(148, 178, 230, .1); stroke-width: 1; }
.pa-hw-bid { stroke: rgba(60, 211, 238, .45); stroke-width: 1; stroke-dasharray: 4 5; }
.pa-hw-wick { stroke: rgba(182, 194, 213, .55); stroke-width: 1.5; }
.pa-hw-body { fill: var(--pa-fx); }
.pa-hw-body.is-dn { fill: var(--pa-ink-0); stroke: var(--pa-text-3); stroke-width: 1.5; }
.pa-hw-t { font-family: var(--pa-font); letter-spacing: -.01em; }
.pa-hw-flow__k { display: grid; grid-template-columns: 32fr 30fr 38fr; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; text-align: center; }
.pa-hw-flow__k li { display: grid; justify-items: center; align-content: start; gap: 6px; font: 600 var(--pa-fs-xs)/1.25 var(--pa-font); color: var(--pa-text-2); }
.pa-hw-flow__n { font: 700 clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem)/.9 var(--pa-font); font-variant-numeric: tabular-nums; letter-spacing: -.045em; color: var(--pa-text); }
.pa-hw-flow__k small { display: none; max-width: 40ch; font: 400 var(--pa-fs-sm)/1.45 var(--pa-font); color: var(--pa-text-3); }
.pa-hw-hero .pa-strip { justify-content: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pa-line); font-size: var(--pa-fs-sm); }
/* the gain's context under it: real money since, the account, the record's settings */
.pa-hw-proof { margin: 6px auto 0 !important; text-align: center; text-wrap: balance; font-size: var(--pa-fs-xs); line-height: 1.45; color: var(--pa-text-3); }
.pa-hw-hero .pa-strip b { font-size: 1.35em; }
@media (min-width: 600px) {
	.pa-hw-flow__k li { font-size: var(--pa-fs-base); }
	.pa-hw-flow__k small { display: block; }
	.pa-hw-hero .pa-strip { font-size: var(--pa-fs-base); }
}

/* the cloud engine: the watchlist console beside the timeline (which stays vertical here) */
/* the H2's second tone on its own line from tablets ("Trades only when conditions line up." stays whole) */
@media (min-width: 600px) { .pa-hw-engine .pa-head { max-width: 820px; } .pa-hw-engine .pa-h2-2 { display: block; } }
.pa-hw-engine__grid { display: grid; gap: 36px; }
.pa-hw-console { display: grid; gap: 16px; padding: 20px; }
.pa-hw-console__h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font: 650 var(--pa-fs-xs)/1.3 var(--pa-font); letter-spacing: .12em; text-transform: uppercase; color: var(--pa-lit); }
.pa-hw-console__h span + span { color: var(--pa-text-3); letter-spacing: .06em; }
.pa-hw-console .pa-map__cap { margin: 0 !important; }
.pa-hw-console .pa-map__gold { stroke: url(#pa-hw-map-gold); }
.pa-hw-console .pa-map__btc { stroke: url(#pa-hw-map-btc); }
.pa-hw-console__reads { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px solid var(--pa-line); font-size: var(--pa-fs-xs); color: var(--pa-text-3); }
.pa-hw-console__reads > span:first-child { margin-right: 4px; }
@media (min-width: 900px) {
	.pa-hw-engine__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 56px; align-items: center; }
	.pa-hw-engine .pa-steps { grid-template-columns: none; gap: 30px; padding: 0 0 0 34px; }
	.pa-hw-engine .pa-steps::before { left: 7px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; background: linear-gradient(180deg, #eef3fa, var(--pa-fx) 40%, var(--pa-go)); }
	.pa-hw-engine .pa-steps li::before { left: -33px; top: 5px; }
	.pa-hw-engine .pa-steps h3 { min-height: 0; }
}

/* on the chart: what the panel shows */
.pa-hw-read { display: grid; gap: 16px; margin: 24px 0 0; padding: 0; list-style: none; }
.pa-hw-read li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 14px; align-items: start; align-content: start; font-size: var(--pa-fs-sm); color: var(--pa-text-2); }
.pa-hw-read .pa-hw-ic { grid-row: span 2; }
.pa-hw-read b { padding-top: 1px; font-weight: 650; color: var(--pa-text); }
@media (min-width: 768px) { .pa-hw-read { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }

/* your EA: the settings card and "No martingale" */
.pa-hw-exec__grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .pa-hw-exec__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; } }
.pa-hw-ea { gap: 0; padding: 20px 20px 6px; }
.pa-hw-ea__h { display: flex; align-items: center; gap: 12px; margin-bottom: 6px !important; font-size: 1.125rem; font-weight: 650; letter-spacing: -.02em; color: var(--pa-text); }
.pa-hw-ea dl { margin: 0; }
.pa-hw-ea dl > div { display: grid; gap: 10px; padding: 16px 0; border-top: 1px solid var(--pa-line); }
.pa-hw-ea dt { font: 650 var(--pa-fs-xs)/1.3 var(--pa-font); letter-spacing: .12em; text-transform: uppercase; color: var(--pa-lit); }
.pa-hw-ea dd { display: grid; gap: 10px; margin: 0; }
.pa-hw-ea .pa-plan__mks { flex-wrap: wrap; }
.pa-hw-ea dd .pa-link { white-space: nowrap; }
@media (min-width: 600px) { .pa-hw-ea dl > div { grid-template-columns: 150px minmax(0, 1fr); gap: 16px; } .pa-hw-ea dt { padding-top: 8px; } }
.pa-hw-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pa-hw-tags li { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border: 1px solid var(--pa-line-strong); border-radius: 999px; background: var(--pa-ink-1); font-size: var(--pa-fs-xs); font-weight: 550; color: var(--pa-text); }
.pa-hw-nm { grid-template-rows: auto auto auto 1fr; gap: 14px; padding: 24px; background: radial-gradient(90% 60% at 100% 0%, rgba(106, 162, 255, .14), transparent 70%), var(--pa-card-bg); }
.pa-hw-nm__top { display: flex; align-items: center; gap: 12px; }
.pa-hw-nm .pa-rule__k { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1; letter-spacing: -.04em; }
.pa-hw-nm .pa-plan__list { flex: none; align-self: end; gap: 0; margin: 4px 0 0; font-size: var(--pa-fs-base); color: var(--pa-text); }
.pa-hw-nm .pa-plan__list li { padding: 13px 0 13px 28px; border-top: 1px solid var(--pa-line); }
.pa-hw-nm .pa-plan__list li::before { top: calc(13px + .55em); }

/* setup: four numbered cards, then the two kinds of update */
.pa-hw-steps { margin: 0; padding: 0; list-style: none; }
/* phones and tablets: number, title and icon on one line; from 1024 px (four across) the number stands above */
.pa-hw-steps .pa-rule { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 14px; padding: 18px 20px 20px; }
.pa-hw-steps__top { display: contents; }
.pa-hw-steps .pa-hw-num { grid-area: 1 / 1; }
.pa-hw-steps .pa-rule__k { grid-area: 1 / 2; }
.pa-hw-steps .pa-hw-ic { grid-area: 1 / 3; }
.pa-hw-steps .pa-rule > p:last-child { grid-column: 1 / -1; }
.pa-hw-num { font-size: clamp(2rem, 1.7rem + 1.4vw, 3rem); font-weight: 600; line-height: 1; letter-spacing: -.05em; color: var(--pa-fx); }
@media (min-width: 1024px) {
	.pa-hw-steps .pa-rule { grid-template-columns: none; align-items: start; gap: 10px; padding: 20px; }
	.pa-hw-steps__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px !important; }
	.pa-hw-steps .pa-rule > * { grid-area: auto; }
}
/* the two kinds of update: one split panel, the cloud half beside the MT5 half (stacked on phones) */
.pa-hw-upd { gap: 0; margin-top: clamp(16px, 2vw, 20px); padding: 0; }
.pa-hw-upd__h { padding: 16px 20px; border-bottom: 1px solid var(--pa-line); font-size: 1.125rem; font-weight: 650; letter-spacing: -.02em; color: var(--pa-text); }
.pa-hw-upd__half { display: grid; gap: 10px; align-content: start; padding: 20px; }
.pa-hw-upd__half + .pa-hw-upd__half { border-top: 1px solid var(--pa-line); }
.pa-hw-upd__top { display: flex; align-items: center; gap: 12px; margin-bottom: 4px !important; }
.pa-hw-upd__on { background: radial-gradient(90% 100% at 0% 0%, rgba(60, 211, 238, .09), transparent 70%); }
@media (min-width: 768px) {
	.pa-hw-upd { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pa-hw-upd__h { grid-column: 1 / -1; padding-inline: 24px; }
	.pa-hw-upd__half { padding: 24px; }
	.pa-hw-upd__half + .pa-hw-upd__half { border-top: 0; border-left: 1px solid var(--pa-line); }
}
.pa-hw-tag { justify-self: start; padding: 3px 10px; border: 1px solid var(--pa-line-strong); border-radius: 999px; font: 650 var(--pa-fs-xs)/1.3 var(--pa-font); color: var(--pa-text-2); }
.pa-hw-upd__on .pa-hw-tag { border-color: var(--pa-fx); color: var(--pa-fx); }
.pa-hw-note { max-width: 72ch; text-align: center; text-wrap: balance; }

/* motion: the lanes and the beam draw once as the flow comes into view (the kit's reveal and failsafe pattern) */
@media (prefers-reduced-motion: no-preference) {
	.pa-js .pa-hw-flow :is(.pa-hw-lane, .pa-hw-beam) { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pa-draw 0s 3s forwards; }
	.pa-io .pa-hw-flow:not(.is-in) :is(.pa-hw-lane, .pa-hw-beam) { animation: none; }
	.pa-js .pa-hw-flow.is-in .pa-hw-lane { stroke-dashoffset: 0; animation: none; transition: stroke-dashoffset 1.1s var(--pa-ease) calc(.1s + var(--i, 0) * 14ms); }
	.pa-js .pa-hw-flow.is-in .pa-hw-beam { stroke-dashoffset: 0; animation: none; transition: stroke-dashoffset .6s cubic-bezier(.5, 0, .3, 1) 1.05s; }
}

/* The broker tip strip (Jim, 17 Oct 2026): its .pa-tip styles are shared in site.css (also on the free-trial page). */
.pa-spread-sec--tip { padding: 4px 0 40px; }