/* ==========================================================================
   How We Work. Loads after home.css and service.css (header, hero board, toasts,
   .node icons, models, FAQ, logo bar, closing strip, footer are shared).
   Brand board only: #947AD3, #70B5F0, #D3D3D3, black.
   ========================================================================== */

/* ---------- hero: the search tracker ---------- */
.tracker { padding-bottom: 14px; }
.hero-art .tracker { margin: 0; }
.track { position: relative; margin: 6px 0 4px; }
.track::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 26px; width: 2px; background: rgba(0,0,0,.12); }
.tr { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 54px; padding: 4px 0; border-top: 1px solid var(--line); }
.tr:first-child { border-top: 0; }
.tr-dot { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid #b9b9c0; }
.tr-name { font-size: 14.5px; font-weight: 600; color: rgba(0,0,0,.45); }
.tr-state { padding: 4px 10px; background: #efeff2; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tr.is-done .tr-dot { background: var(--purple) no-repeat center / 13px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5 10 18.5 20 6'/></svg>"); border-color: var(--purple); }
.tr.is-done .tr-name { color: var(--text); }
.tr.is-done .tr-state { background: var(--purple-t); color: var(--text); }
.tr.is-live .tr-dot { border-color: var(--ink); background: var(--blue); animation: tr-pulse 2s ease-out infinite; }
.tr.is-live .tr-name { color: var(--text); }
.tr.is-live .tr-state { background: var(--ink); color: #fff; }
@keyframes tr-pulse { 0% { box-shadow: 0 0 0 0 rgba(112,181,240,.7); } 100% { box-shadow: 0 0 0 12px rgba(112,181,240,0); } }

/* ---------- the journey ---------- */
.journey { position: relative; display: grid; gap: clamp(24px, 3vw, 40px); margin-top: 8px; }
.journey::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(0,0,0,.14); }
.jline { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--purple); transform-origin: top; transform: scaleY(var(--p, 0)); padding: 0; transition: transform .12s linear; }
.jstep { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(56px, 7vw, 104px); align-items: center; min-height: 210px; }
.jstep .node { left: 50%; top: 50%; margin: -23px 0 0 -23px; z-index: 2; }
.jtext { justify-self: end; max-width: 26em; text-align: right; }
.jmock { justify-self: start; width: 100%; max-width: 400px; padding: 18px 20px 20px; background: #fff; box-shadow: 0 22px 44px rgba(0,0,0,.12); font-size: 13px; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.jstep:hover .jmock { transform: translateY(-4px); box-shadow: 0 28px 52px rgba(0,0,0,.16); }
.jstep:nth-child(odd) .jtext { order: 2; justify-self: start; text-align: left; }
.jstep:nth-child(odd) .jmock { order: 1; justify-self: end; }
.jstep:nth-child(even) .jtext { order: 1; }
.jstep:nth-child(even) .jmock { order: 2; }
.jtext h3 { font: 400 clamp(28px, 3vw, 40px)/1.1 var(--serif); letter-spacing: -.02em; margin-bottom: 10px; }
.jtext p { color: var(--muted); font-size: 16.5px; }
.jmock .mock-title { margin-bottom: 6px; }
.jmock .mock-row { min-height: 40px; }
.mock-hint { margin-top: 12px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.mock-hint--tick { display: flex; align-items: center; gap: 10px; color: var(--text); text-transform: none; letter-spacing: 0; font-size: 13px; }
.jsearch { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 10px 16px; margin-bottom: 8px; border: 1.5px solid var(--ink); font-weight: 600; font-size: 14px; }
.jsearch-go { width: 30px; height: 30px; background: var(--ink) no-repeat center / 15px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'><circle cx='10.5' cy='10.5' r='6.5'/><path d='m15.5 15.5 5 5'/></svg>"); }
.mbar { display: block; height: 8px; background: #e6e6ea; }
.mbar b { display: block; height: 100%; background: var(--purple); transform-origin: left; }
.bubble .skel { background: rgba(0,0,0,.28); }
.bubble { padding: 12px 14px; margin-bottom: 8px; background: var(--purple-t); display: grid; gap: 8px; max-width: 78%; }
.score { display: grid; grid-template-columns: 96px 1fr; align-items: center; min-height: 34px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.dots { display: flex; gap: 6px; }
.dots b, .dots u { width: 12px; height: 12px; border-radius: 50%; }
.dots b { background: var(--purple); }
.dots u { background: #e1e1e6; }
.cand { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.cand:first-of-type { border-top: 0; padding-top: 4px; }
.cand-lines { display: grid; gap: 7px; }
.av { display: block; width: 38px; height: 38px; border-radius: 50%; }
.av--purple { background: var(--purple); } .av--blue { background: var(--blue); }
.mock-row--check { grid-template-columns: 28px 1fr; font-weight: 600; font-size: 14px; }
.tick--pending { background-color: #fff; border: 2px solid #b9b9c0; background-image: none; animation: tr-pulse 2s ease-out infinite; }
.jtime { display: grid; gap: 0; padding: 4px 0 0 6px; }
.jt { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 0; font-size: 14px; font-weight: 600; }
.jt i { position: relative; z-index: 1; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid #b9b9c0; }
.jt::before { content: ""; position: absolute; left: 8px; top: -50%; height: 100%; width: 2px; background: #e1e1e6; }
.jt:first-child::before { display: none; }
.jt--done i { background: var(--purple); border-color: var(--purple); }
.jt--live i { background: var(--blue); border-color: var(--ink); animation: tr-pulse 2s ease-out infinite; }

/* ---------- compare: a long list versus a few good ones ---------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.cmp { position: relative; padding: 28px 30px 30px; min-height: 340px; overflow: hidden; }
.cmp--long { background: #f1f1f3; }
.cmp--few { background: var(--purple-t); }
.cmp-title { font: 400 clamp(22px, 2.2vw, 28px)/1.2 var(--serif); letter-spacing: -.015em; margin-bottom: 22px; }
.cmp-rows { display: grid; gap: 10px; }
.cmp--long .cmp-rows i { display: block; height: 20px; background: #dcdce1; }
.cmp--long .cmp-rows i:nth-child(odd) { width: 92%; } .cmp--long .cmp-rows i:nth-child(3n) { width: 78%; }
.cmp--long::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(to top, #f1f1f3, rgba(241,241,243,0)); }
.cmp-rows--few { gap: 14px; }
.cmp-rows--few span { display: grid; grid-template-columns: 38px minmax(0, 1fr) 26px; gap: 14px; align-items: center; padding: 14px 16px; background: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.cmp-rows--few b { display: block; height: 10px; }
.cmp-rows--few em { display: block; width: 26px; height: 26px; }

/* ---------- fees: an agreement card ---------- */
.fees-note { max-width: 24em; }
.agree { padding: clamp(24px, 3vw, 38px); background: #fff; box-shadow: 0 26px 54px rgba(0,0,0,.12); border-top: 4px solid var(--purple); }
.agree-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--text); font-size: 15px; }
.agree-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.agree-list .tick { margin-top: 2px; }
.agree-list p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.agree-list strong { color: var(--text); font-weight: 700; }
.agree-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 26px; }
.agree-sign span { display: block; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.agree-sign i { display: block; height: 28px; margin-bottom: 8px; border-bottom: 1.5px solid var(--text); }

/* ---------- needs: checklist that ticks itself ---------- */
.needs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.need { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; align-items: start; padding: 30px 28px 32px; background: #fff; border-top: 4px solid var(--blue); }
.need:nth-child(2) { border-top-color: var(--purple); }
.need:nth-child(3) { border-top-color: var(--ink); }
.need p { margin: 0; color: var(--muted); font-size: 16.5px; line-height: 1.55; }
.need strong { display: block; margin-bottom: 4px; color: var(--text); font: 400 clamp(22px, 2vw, 27px)/1.2 var(--serif); letter-spacing: -.015em; }
.box { position: relative; display: block; width: 36px; height: 36px; border: 2px solid var(--ink); background: #fff; }
.box::after { content: ""; position: absolute; inset: 4px; background: no-repeat center / 24px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23947ad3' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5 10 18.5 20 6'/></svg>"); }
.js .box::after { clip-path: inset(0 100% 0 0); transition: clip-path .6s var(--ease); transition-delay: calc(.35s + var(--k) * .25s); }
.js .need.is-in .box::after { clip-path: inset(0 0 0 0); }
.model-note--white { background: #fff; }
.tick--pending { background-image: none; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .journey::before, .jline { left: 23px; margin-left: -1px; }
  .jstep { grid-template-columns: minmax(0, 1fr); gap: 18px; min-height: 0; padding-left: 64px; }
  .jstep .node { left: 0; top: 0; margin: 0; }
  .jtext, .jstep:nth-child(odd) .jtext, .jstep:nth-child(even) .jtext { order: 1; justify-self: start; text-align: left; }
  .jmock, .jstep:nth-child(odd) .jmock, .jstep:nth-child(even) .jmock { order: 2; justify-self: start; max-width: 460px; }
  .compare { grid-template-columns: minmax(0, 1fr); }
  .needs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .jstep { padding-left: 58px; }
  .score { grid-template-columns: 84px 1fr; }
  .tr { gap: 10px; }
  .tr-name { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .tr.is-live .tr-dot, .tick--pending, .jt--live i { animation: none !important; }
  .jline { transform: none !important; transition: none !important; }
  .js .box::after { clip-path: none !important; }
}

/* ================= scroll-driven journey ================= */
.journey { --p: 0; }
.jstep { opacity: .38; transition: opacity .5s var(--ease); }
.jstep.is-seen { opacity: .62; }
.jstep.is-active { opacity: 1; }
.jstep .node { animation: none; transition: background .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease), border-color .4s; }
.jstep.is-seen .node { background: var(--purple-t); border-color: var(--purple); }
.jstep.is-active .node { background: var(--purple); border-color: var(--ink); transform: scale(1.22); animation: node-ring 2.4s ease-out infinite; }
.jstep.is-active .node svg { stroke: #fff; }
.jstep.is-active .node .i-fill { fill: #fff; stroke: #fff; }
@keyframes node-ring { 0% { box-shadow: 0 0 0 0 rgba(148,122,211,.55); } 100% { box-shadow: 0 0 0 20px rgba(148,122,211,0); } }
.jstep .jtext, .jstep .jmock { transition: transform .6s var(--ease), opacity .5s, box-shadow .4s; }
.js .jstep:nth-child(even) .jtext, .js .jstep:nth-child(odd) .jmock { transform: translateX(-26px); }
.js .jstep:nth-child(odd) .jtext, .js .jstep:nth-child(even) .jmock { transform: translateX(26px); }
.js .jstep.is-seen .jtext, .js .jstep.is-seen .jmock { transform: none; }
.jstep.is-active .jmock { box-shadow: 0 30px 60px rgba(0,0,0,.2), 0 0 0 2px var(--purple); transform: translateY(-6px) !important; }

/* mock-ups play when their step is seen */
.jmock .skel { transform-origin: left; }
.jstep.is-seen:nth-child(2) .skel { animation: skel-grow .7s var(--ease) both; }
.jstep.is-seen:nth-child(2) .mock-row:nth-of-type(2) .skel { animation-delay: .15s; }
.jstep.is-seen:nth-child(2) .mock-row:nth-of-type(3) .skel { animation-delay: .3s; }
.jstep.is-seen:nth-child(2) .mock-row:nth-of-type(4) .skel { animation-delay: .45s; }
@keyframes skel-grow { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

.mbar b { transform: scaleX(0); transition: transform 1.2s var(--ease) .35s; }
.jstep.is-seen .mbar b { transform: scaleX(1); }
.jstep.is-active .jsearch-go { animation: go-pulse 1.8s ease-in-out infinite; }
@keyframes go-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

.bubble { opacity: 0; transform: translateY(8px); transition: opacity .5s .1s, transform .5s .1s var(--ease); }
.jstep.is-seen .bubble { opacity: 1; transform: none; }
.dots b { transform: scale(0); }
.jstep.is-seen .dots b { animation: dot-pop .45s var(--ease) both; }
.jstep.is-seen .dots b:nth-child(1) { --d: 0s; } .jstep.is-seen .dots b:nth-child(2) { --d: .1s; } .jstep.is-seen .dots b:nth-child(3) { --d: .2s; } .jstep.is-seen .dots b:nth-child(4) { --d: .3s; } .jstep.is-seen .dots b:nth-child(5) { --d: .4s; }
.jstep.is-seen .score:nth-of-type(1) .dots b { animation-delay: calc(.4s + var(--d, 0s)); }
.jstep.is-seen .score:nth-of-type(2) .dots b { animation-delay: calc(.9s + var(--d, 0s)); }
.jstep.is-seen .score:nth-of-type(3) .dots b { animation-delay: calc(1.4s + var(--d, 0s)); }
@keyframes dot-pop { from { transform: scale(0); } 70% { transform: scale(1.35); } to { transform: scale(1); } }

.cand { opacity: 0; transform: translateX(24px); transition: opacity .5s, transform .6s var(--ease); }
.jstep.is-seen .cand { opacity: 1; transform: none; }
.jstep.is-seen .cand:nth-of-type(2) { transition-delay: .3s; }
.jstep.is-seen .cand .mock-chip { animation: chip-pop .5s var(--ease) .7s both; }
@keyframes chip-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.mock-hint--tick .tick { transform: scale(0); }
.jstep.is-seen .mock-hint--tick .tick { animation: dot-pop .5s var(--ease) 1.1s both; }

.mock-row--check .tick { transform: scale(0); }
.jstep.is-seen .mock-row--check .tick { animation: dot-pop .45s var(--ease) both; }
.jstep.is-seen .mock-row--check:nth-of-type(1) .tick { animation-delay: .3s; }
.jstep.is-seen .mock-row--check:nth-of-type(2) .tick { animation-delay: .8s; }
.jstep.is-seen .mock-row--check:nth-of-type(3) .tick { animation-delay: 1.3s; }

.jt i { transform: scale(.5); transition: transform .4s var(--ease), background .4s, border-color .4s; }
.jt { opacity: .35; transition: opacity .5s; }
.jstep.is-seen .jt { opacity: 1; }
.jstep.is-seen .jt i { transform: scale(1); }
.jstep.is-seen .jt:nth-child(2), .jstep.is-seen .jt:nth-child(2) i { transition-delay: .35s; }
.jstep.is-seen .jt:nth-child(3), .jstep.is-seen .jt:nth-child(3) i { transition-delay: .7s; }

@media (max-width: 1020px) {
  .js .jstep:nth-child(n) .jtext, .js .jstep:nth-child(n) .jmock { transform: translateY(16px); }
  .js .jstep.is-seen .jtext, .js .jstep.is-seen .jmock { transform: none; }
  .jline { left: 23px; margin-left: -1.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .jstep, .jstep * { animation: none !important; transition: none !important; }
  .jstep { opacity: 1 !important; }
  .js .jstep .jtext, .js .jstep .jmock, .bubble, .cand, .dots b, .mock-row--check .tick, .mock-hint--tick .tick, .jt i { opacity: 1 !important; transform: none !important; }
  .mbar b { transform: none !important; }
}

/* ================= fees: four term tiles ================= */
.terms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.term { min-height: 250px; padding: 32px 28px 34px; display: flex; flex-direction: column; justify-content: flex-end; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.term:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0,0,0,.14); }
.term--purple { background: var(--purple); } .term--blue { background: var(--blue); } .term--grey { background: var(--grey); } .term--ink { background: var(--footer); color: #fff; }
.term h3 { font: 400 clamp(25px, 2.3vw, 32px)/1.12 var(--serif); letter-spacing: -.02em; margin: 0 0 12px; }
.term p { margin: 0; font-size: 15.5px; line-height: 1.55; opacity: .9; }
@media (max-width: 1020px) { .terms { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .terms { grid-template-columns: minmax(0, 1fr); } .term { min-height: 0; } }