/*
 * How it works page (page-specific layouts). Built entirely on the theme's
 * existing tokens and components: colours, radii, type scale, mono face, easing
 * and spacing all come from :root. New compositions only, no new visual language.
 * .hero-lite, .hero-textlink and the offer-grid variants live in style.css.
 */

/* ============================================================
   Thesis: full-width centred statement on the dark panel surface.
   The one pause in the page.
   ============================================================ */
.thesis { background: var(--panel); color: #fff; text-align: center; }
.thesis .wrap { max-width: 880px; }
.thesis-h {
	font-size: clamp(2rem, 4.4vw, 3.1rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: #fff;
	margin: 0;
}
.thesis-sub {
	margin: 1.2rem auto 0;
	max-width: 52ch;
	color: var(--panel-text);
	font-size: 1.1rem;
	line-height: 1.6;
}

/* ============================================================
   The journey: three staggered steps threaded by the signal line.
   The line and the pairing connectors are drawn by journey.js through the real
   node and pair positions, so they stay accurate at any height. Layout, line and
   illustrations all use existing tokens and the flow motif. Journey section only.
   ============================================================ */
.journey { position: relative; margin-top: clamp(44px, 6vw, 80px); }
.journey-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.jline-main { fill: none; stroke: url(#jmain-grad); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.jline-link { fill: none; stroke: var(--card-border); stroke-width: 1.5; stroke-dasharray: 1 5; stroke-linecap: round; }
.js0 { stop-color: var(--accent); }
.js1 { stop-color: var(--accent); stop-opacity: 0; }

.jsteps { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(56px, 9vw, 130px); }
.jstep { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 8vw, 116px); align-items: start; }
.jnode { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); z-index: 3; display: grid; place-items: center; }
.jnum {
	width: 52px; height: 52px; border-radius: 50%;
	background: var(--surface);
	border: 2px solid var(--accent);
	color: var(--accent);
	font-family: var(--font-mono); font-weight: 500; font-size: 0.92rem;
	display: grid; place-items: center;
}
.jcopy { grid-column: 1; max-width: 42ch; }
.jart { grid-column: 2; margin-top: clamp(40px, 6vw, 92px); justify-self: stretch; min-width: 0; }
.jstep:nth-child(even) .jcopy { grid-column: 2; }
.jstep:nth-child(even) .jart { grid-column: 1; }

.jhead { font-size: clamp(1.45rem, 2.4vw, 1.95rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.06; margin: 0.5rem 0 0; }
.jcopy > p { color: var(--text-dim); font-size: 1.02rem; line-height: 1.55; margin: 0.8rem 0 0; }
.jcopy .step-more { padding-top: 1.1rem; }

/* Step three carries a little more weight and a finishing, recurring cue. */
.jstep--last .jnode::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--card-border); }
.jart-manage { border-color: var(--card-border); }

/* ---- Illustrations: each a different kind of thing, one business throughout. ---- */
.jart-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.jart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.jart-title { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.01em; color: var(--ink); }
.jart-tag { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 2px 7px; white-space: nowrap; }
.jart-tag--go { color: var(--accent); border-color: var(--card-border); }
.jart-tag--loop { color: var(--accent); border-color: var(--card-border); display: inline-flex; align-items: center; gap: 0.4em; }
.jart-tag--loop .jcyc { font-size: 0.85rem; line-height: 1; }

/* Step one: the "what AI says" snapshot, observed */
.jart-rows { padding: 3px 14px 10px; }
.jrow { display: grid; grid-template-columns: 5.4em auto 1fr; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.jrow:first-child { border-top: 0; }
.jrow-plat { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink); }
.jrow-meter { display: inline-flex; gap: 3px; }
.jrow-meter i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.jrow-meter i.on { background: var(--ink); }
.jrow-note { font-size: 0.8rem; color: var(--text-dim); }
.jrow-flag { justify-self: start; font-family: var(--font-mono); font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); border: 1px solid var(--card-border); border-radius: var(--radius-pill); padding: 2px 7px; }

/* Step two: the AI Dedicated Page being built (structured output + crawler access) */
.jart-code { font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.55; margin: 0; padding: 12px 14px; white-space: pre; overflow: hidden; }
.jart-code .c-l { display: block; color: var(--text-dim); }
.jart-code .c-add { display: block; color: var(--accent); }
.jart-bots { display: flex; flex-direction: column; gap: 7px; padding: 2px 14px 12px; }
.jart-bot { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink); }
.jart-bot .ok { color: var(--accent); font-size: 0.66rem; letter-spacing: 0.05em; }

/* Step three: the Monthly Report, recurring and climbing */
.jart-trend { padding: 13px 14px 6px; }
.jtrend-label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.jtrend-chart { position: relative; }
.jtrend-spark { width: 100%; height: 60px; display: block; }
.jspark-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jspark-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--accent); box-sizing: border-box; transform: translate(-50%, -50%); }
.jspark-dot.is-now { width: 8px; height: 8px; background: var(--accent); }
.jtrend-months { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--font-mono); font-size: 0.58rem; color: var(--muted); }
.jart-foot { padding: 10px 14px 13px; border-top: 1px solid var(--line-soft); font-size: 0.8rem; color: var(--text-dim); display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; align-items: center; }
.jart-cycle { color: var(--accent); font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 0.35em; white-space: nowrap; }

@media (max-width: 860px) {
	.journey-svg { display: none; }
	.jsteps { gap: clamp(40px, 9vw, 56px); }
	.jstep { grid-template-columns: 1fr; }
	.jnode { position: static; transform: none; justify-items: start; margin-bottom: 4px; order: 0; }
	.jcopy, .jstep:nth-child(even) .jcopy { grid-column: 1; order: 1; max-width: none; }
	.jart, .jstep:nth-child(even) .jart { grid-column: 1; order: 2; margin-top: 16px; }
	.jstep--last .jnode::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.jline-main { transition: none !important; }
}

/* ============================================================
   Both halves: the SEO / GEO diptych.
   ============================================================ */
.diptych {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-top: clamp(28px, 4vw, 40px);
}
/* Each half is a standard white card: border and light-pink hover come from the
   shared card rule in style.css. Flex column pins the Dig deeper link to the base. */
.dip { background: var(--surface); border-radius: var(--radius); padding: clamp(28px, 3.6vw, 46px); display: flex; flex-direction: column; }
.dip .step-more { margin-top: auto; padding-top: 1.4rem; }
@media (max-width: 680px) {
	.diptych { grid-template-columns: 1fr; }
}
.dip-k { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-pink); display: inline-flex; align-items: center; gap: 0.5em; }
.dip-k i { font-size: 1.05rem; }
.dip-v { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing: -0.03em; color: var(--ink); margin: 0.6rem 0 0.45rem; line-height: 1.04; }
.dip-d { color: var(--text-dim); font-size: 1rem; line-height: 1.55; margin: 0; }

/* Quiet caption beneath the diptych (not a banner): the crisp summary line. */
.halves-line { margin: clamp(20px, 2.6vw, 28px) 0 0; font-size: 0.95rem; line-height: 1.55; color: var(--muted); max-width: 64ch; }

/* Deliverable cards: a small step eyebrow tying each output to the step that
   produces it (From step one / two / three). */
.offer-step { font-family: var(--font-mono); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-pink); margin-bottom: 0.7rem; }

/* ============================================================
   The dare: the second dark moment, with the ask-it-yourself links.
   The .dare band styling is global (style.css); only the asks are page-specific.
   ============================================================ */
.dare-asks { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 22px; }
.dare-asks a { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 600; font-size: 0.95rem; color: var(--brand-pink); }
.dare-asks a svg { width: 15px; height: 15px; }
.dare-asks a:hover { color: #ff7aa8; }