/*
 * Journey timeline — a vertical process line that "fills" with gold as you
 * scroll through it, lighting up each step in turn. Handles any number of
 * steps honestly (3, 4, 6…). Scoped .amc-journey. No scroll-jacking; the page
 * scrolls normally and only the fill + step states respond. Reduced-motion aware.
 */
.amc-journey {
	--line-x: 34px;
}
.amc-journey * { box-sizing: border-box; }
.amc-journey__head { max-width: 62ch; margin: 0 auto clamp(1.8rem,4vw,2.6rem); text-align: center; }
.amc-journey h2 { color: var(--green); font-size: var(--wp--preset--font-size--h-2); font-weight: 700; letter-spacing: -.02em; line-height: 1.14; margin: .9rem 0 0; }
/* .amc-journey prefix: on the homepage, .amc-home p { margin: 0 } would
   otherwise out-rank these and strip the auto-centering. */
.amc-journey .amc-journey__head p { color: var(--text); margin: 1.7rem auto 0; font-size: 1.06rem; max-width: 52ch; }

/* Path toggle (private vs CDHCI) */
.amc-journey__switch { text-align: center; margin-bottom: clamp(2rem,4vw,3rem); }
.amc-journey__tabs { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 5px; border-radius: 24px; background: var(--cream); border: 1px solid var(--border); max-width: 100%; }
.amc-journey__tab { display: inline-flex; align-items: center; gap: .5em; padding: .65em 1.5em; border-radius: 999px; border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--text); cursor: pointer; transition: background .25s var(--ease), color .25s, box-shadow .25s; }
.amc-journey__tab .n { font-size: .78rem; font-weight: 700; opacity: 1; }
.amc-journey__tab[aria-selected="true"] { background: var(--gold); color: var(--green); box-shadow: 0 8px 20px -10px rgba(231,174,18,.8); }
.amc-journey__tab[aria-selected="true"] .n { opacity: 1; }
.amc-journey__tab:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
/* Four pathways: on small screens tighten the tabs and drop the step count so
   they stay readable (the panel lead still states the number of steps). */
@media (max-width: 720px) {
	.amc-journey__tab { padding: .7em 1.05em; font-size: .92rem; }
	/* Keep the honesty device at every size — just smaller. */
	.amc-journey__tab .n { font-size: .68rem; opacity: .85; }
}
/* Three-path mode (CDHCI page): the tabs become an explicit choice row —
   equal-width option cards in one line, borrowing the checker's option
   dialect (white card, sand border, teal hover, gold-checked) so "pick your
   situation" reads as buttons, not labels. */
.amc-journey--paths .amc-journey__tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; width: 100%; padding: 0; border: 0; border-radius: 0; background: none; }
.amc-journey--paths .amc-journey__tab { position: relative; flex-direction: column; align-items: center; justify-content: center; gap: .3em; padding: .95rem 1rem .9rem; border-radius: 14px; border: 1.5px solid var(--border); background: #fff; text-align: center; line-height: 1.25; box-shadow: 0 10px 28px -24px rgba(17,78,70,.4); transition: border-color .2s var(--ease), background .2s, transform .2s var(--ease), box-shadow .2s, color .2s; }
.amc-journey--paths .amc-journey__tab .t { text-wrap: balance; }
.amc-journey--paths .amc-journey__tab .n { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teal); }
.amc-journey--paths .amc-journey__tab .n .sep { display: none; }
.amc-journey--paths .amc-journey__tab:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: 0 24px 60px -34px rgba(17,78,70,.4); }
.amc-journey--paths .amc-journey__tab[aria-selected="true"] { background: #fffdf5; border-color: var(--gold); color: var(--green); box-shadow: 0 16px 38px -30px rgba(17,78,70,.45); }
.amc-journey--paths .amc-journey__tab[aria-selected="true"] .n { color: var(--green); }
/* drawn check badge, top-right — appears on the chosen path */
.amc-journey--paths .amc-journey__tab::before { content: ""; position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); opacity: 0; transform: scale(.5); transition: opacity .2s, transform .25s var(--ease); }
.amc-journey--paths .amc-journey__tab::after { content: ""; position: absolute; top: 12.5px; right: 15.5px; width: 5px; height: 9px; border-right: 2px solid var(--green); border-bottom: 2px solid var(--green); opacity: 0; transform: rotate(45deg) scale(.5); transition: opacity .2s, transform .25s var(--ease); }
.amc-journey--paths .amc-journey__tab[aria-selected="true"]::before { opacity: 1; transform: none; }
.amc-journey--paths .amc-journey__tab[aria-selected="true"]::after { opacity: 1; transform: rotate(45deg); }
@media (max-width: 600px) {
	.amc-journey--paths .amc-journey__tabs { grid-template-columns: 1fr; gap: .6rem; }
	.amc-journey--paths .amc-journey__tab { padding: .85rem 1rem .8rem; }
}
@media (prefers-reduced-motion: reduce) {
	.amc-journey--paths .amc-journey__tab, .amc-journey--paths .amc-journey__tab::before, .amc-journey--paths .amc-journey__tab::after { transition: none !important; }
	.amc-journey--paths .amc-journey__tab:hover { transform: none; }
}

.amc-journey__panel[hidden] { display: none; }
.amc-journey .amc-journey__lead { text-align: center; color: var(--text); max-width: 54ch; margin: 0 auto clamp(1.6rem,3vw,2.4rem); font-size: 1rem; }

.amc-journey__track { position: relative; max-width: 760px; margin-inline: auto; padding-left: calc(var(--line-x) + 40px); }
/* the rail + gold fill */
.amc-journey__rail { position: absolute; left: var(--line-x); top: 12px; bottom: 12px; width: 4px; border-radius: 4px; background: var(--border); overflow: hidden; }
.amc-journey__fill { position: absolute; left: 0; top: 0; width: 100%; height: var(--progress, 0%); background: linear-gradient(var(--gold), var(--gold-strong)); border-radius: 4px; transition: height .15s linear; }

.amc-jstep { position: relative; padding: 0 0 clamp(1.6rem,3vw,2.4rem); }
.amc-jstep:last-child { padding-bottom: 0; }
.amc-jstep__marker { position: absolute; left: calc(-1 * (var(--line-x) + 40px) + var(--line-x) - 24px); top: 0; width: 52px; height: 52px; border-radius: 50%; background: var(--cream); border: 3px solid var(--border); display: grid; place-items: center; font-weight: 800; color: var(--muted); z-index: 2; transition: background .4s var(--ease), border-color .4s, color .4s, transform .4s var(--ease); }
.amc-jstep.on .amc-jstep__marker { background: var(--gold); border-color: var(--gold); color: var(--green); transform: scale(1.08); }
.amc-jstep__card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 1.3rem 1.5rem; box-shadow: 0 12px 30px -24px rgba(17,78,70,.4); opacity: .55; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease), box-shadow .4s, border-color .4s; }
.amc-jstep.on .amc-jstep__card { opacity: 1; transform: none; border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); box-shadow: 0 18px 40px -26px rgba(17,78,70,.5); }
.amc-jstep__eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }
.amc-jstep__card h3 { color: var(--green); font-size: 1.2rem; font-weight: 700; margin: .3rem 0 .5rem; }
.amc-jstep__card p { color: var(--text); margin: 0; font-size: .98rem; line-height: 1.55; }
/* steps that carry a watercolor illustration */
/* The illustration owns the card's left section: full-height, edge-to-edge
   (owner mock 2026-08-26); the body carries the padding instead of the card. */
.amc-jstep.has-illo .amc-jstep__card { display: flex; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.amc-jstep__illo { flex: 0 0 clamp(150px, 26%, 230px); background: var(--wp--preset--color--surface-alt); border-right: 1px solid var(--border); }
.amc-jstep__illo img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.amc-jstep.has-illo .amc-jstep__body { padding: 1.3rem 1.5rem; }
.amc-jstep__body { min-width: 0; }
@media (max-width: 460px) {
	.amc-jstep.has-illo .amc-jstep__card { flex-direction: column; align-items: stretch; }
	.amc-jstep__illo { flex: none; width: 100%; height: 150px; border-right: 0; border-bottom: 1px solid var(--border); }
}

.amc-journey__foot { text-align: center; margin-top: clamp(2rem,4vw,3rem); }
.amc-journey a.amc-journey__btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: .5em; padding: .85em 1.8em; border-radius: 999px; background: var(--gold); color: var(--wp--preset--color--gold-ink); font-weight: 700; text-decoration: none; transition: color .3s ease, transform .2s var(--ease); }
.amc-journey a.amc-journey__btn::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--green); transform: translateX(-101%); transition: transform .5s var(--ease); }
.amc-journey a.amc-journey__btn:hover { color: #fff; transform: translateY(-2px); }
.amc-journey a.amc-journey__btn:hover::after { transform: translateX(0); }
.amc-journey__btn .arw { transition: transform .2s var(--ease); }
.amc-journey__btn:hover .arw { transform: translateX(3px); }

@media (max-width: 560px) {
	.amc-journey__track { padding-left: 60px; --line-x: 24px; }
	.amc-jstep__marker { width: 46px; height: 46px; font-size: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
	.amc-journey__fill { transition: none !important; height: 100% !important; }
	.amc-jstep__card, .amc-jstep__marker { transition: none !important; }
	.amc-jstep__card { opacity: 1 !important; transform: none !important; }
	.amc-jstep .amc-jstep__marker { background: var(--gold); border-color: var(--gold); color: var(--green); }
}