/* A scroll-linked four-stop timeline, using the existing card artwork and palette. */
#how-it-works .how-timeline-nav { position:relative; padding:0; margin:30px auto 0; isolation:isolate; }
.how-timeline-nav ol { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; list-style:none; margin:0; padding:0; }
.how-timeline-nav li { min-width:0; }
.how-timeline-stop { display:flex; width:100%; min-height:80px; flex-direction:column; align-items:center; gap:20px; padding:15px 6px 8px; border:0; background:transparent; color:#75836b; font:600 13px/1.4 'Inter',sans-serif; text-align:center; cursor:pointer; }
.how-timeline-node { display:block; flex:0 0 10px; width:10px; height:10px; border:1px solid #a2ad8f; border-radius:50%; background:#fffce8; }
.how-timeline-stop.is-complete .how-timeline-node { border-color:#0b3d23; background:#0b3d23; }
.how-timeline-stop[aria-current='step'] { color:#062817; font-weight:700; }
.how-timeline-stop[aria-current='step'] .how-timeline-node { border-color:#0b3d23; background:#fffce8; }
.how-timeline-stop:focus-visible { outline:2px solid #0b3d23; outline-offset:-2px; border-radius:9px; }
.how-timeline-rail { position:absolute; z-index:-1; top:20px; left:12.5%; right:12.5%; height:1px; background:#a2ad8f80; pointer-events:none; }
.how-timeline-fill { display:block; width:100%; height:2px; transform-origin:0 50%; transform:scaleX(var(--how-progress,0)); background:#0b3d23; }
.how-timeline-cursor { position:absolute; z-index:1; top:12px; left:12.5%; width:16px; height:16px; border:2px solid #0b3d23; border-radius:50%; background:#fee417; box-shadow:0 0 0 4px #fffce8; transform:translate3d(calc(var(--how-progress,0)*var(--how-rail-width,0px)),0,0) translateX(-50%); pointer-events:none; }

#how-it-works.how-timeline-active { padding:0; }
#how-it-works.how-timeline-active .how-timeline-pin { position:sticky; top:var(--how-header,100px); height:calc(100svh - var(--how-header,100px)); display:flex; flex-direction:column; padding:24px 0 max(16px,env(safe-area-inset-bottom)); overflow:clip; }
#how-it-works.how-timeline-active .cp-auction-layout { flex:1; min-height:0; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(32px,5vw,80px); align-items:center; }
#how-it-works.how-timeline-active .how-timeline-pin > .cp-shell { width:calc(100% - clamp(40px,7vw,160px)); max-width:1800px; }
#how-it-works.how-timeline-active .cp-auction-copy { position:relative; top:auto; margin:0; align-self:center; }
#how-it-works.how-timeline-active .cp-auction-eyebrow { margin-bottom:24px; }
#how-it-works.how-timeline-active h2 { font-size:clamp(44px,min(5.2vw,8svh),82px); line-height:1.02; letter-spacing:-.04em; }
#how-it-works.how-timeline-active .cp-auction-copy > p { margin:24px 0; }
#how-it-works.how-timeline-active .cp-how-steps { position:relative; height:100%; min-height:0; padding:0; overflow:hidden; }
#how-it-works.how-timeline-active .cp-auction-card {
 position:absolute; top:50%; left:0; width:calc(100% - 24px); height:var(--how-card-height,360px); min-height:0;
 --how-visual-min:140px; container-type:inline-size;
 display:flex; flex-direction:column; margin:0; padding:clamp(24px,2.6vw,36px); border-radius:16px;
 transform:translate3d(var(--how-card-x,12px),-50%,0); transform-origin:50% 50%;
 transition:none; will-change:transform; box-shadow:0 9px 24px -20px #173d2338;
}
#how-it-works.how-timeline-active .how-visual { flex:1; min-height:var(--how-visual-min); height:auto; }
#how-it-works.how-timeline-active .how-live { height:100%; min-height:var(--how-visual-min); max-height:280px; }
/* Artwork follows its card width, rather than the full browser width. */
#how-it-works.how-timeline-active .how-report { gap:clamp(9px,2cqw,20px); padding:clamp(9px,2cqw,20px); }
#how-it-works.how-timeline-active .how-report-photo { flex-basis:clamp(56px,16cqw,120px); }
#how-it-works.how-timeline-active .how-wagon { width:clamp(60px,19cqw,136px); height:auto; aspect-ratio:1; }
#how-it-works.how-timeline-active .how-profile { width:min(100%,120px); }
#how-it-works.how-timeline-active .how-performance { gap:clamp(12px,3cqw,24px); }
#how-it-works.how-timeline-active .how-timeline-nav { flex:0 0 82px; margin-top:16px; }
#how-it-works.how-timeline-active .cp-how-footer { margin:0; padding-top:10px; border-top:1px solid #cbd1b870; font-size:11px; }
#how-it-works.how-timeline-active .cp-how-footer .cp-auction-link { min-height:32px; font-size:11px; }

@media (min-height:700px) {
 @container (min-width:480px) {
  #how-it-works.how-timeline-active .cp-auction-card-top > span:first-child { font-size:56px; }
  #how-it-works.how-timeline-active .how-card-icon > svg { width:42px; height:42px; }
  #how-it-works.how-timeline-active .cp-auction-card h3 { font-size:clamp(28px,5cqw,38px); }
  #how-it-works.how-timeline-active .how-bracket { height:180px; max-height:100%; }
  #how-it-works.how-timeline-active .how-bracket-team { width:56px; height:56px; }
  #how-it-works.how-timeline-active .how-crest { width:36px; height:42px; }
  #how-it-works.how-timeline-active .how-fixtures { max-width:260px; padding:12px; }
  #how-it-works.how-timeline-active .how-fixture-tabs span { font-size:12px; padding:8px 2px; }
  #how-it-works.how-timeline-active .how-calendar-dots { row-gap:13px; }
  #how-it-works.how-timeline-active .how-profile { width:min(100%,140px); }
  #how-it-works.how-timeline-active .how-roles { max-width:180px; }
  #how-it-works.how-timeline-active .how-role { padding:14px 8px; font-size:13px; }
  #how-it-works.how-timeline-active .how-role svg { width:22px; height:22px; }
  #how-it-works.how-timeline-active .how-invite-face { max-width:72px; }
  #how-it-works.how-timeline-active .how-invite-add { max-width:56px; }
  #how-it-works.how-timeline-active .how-invite-label { font-size:12px; }
 }
}

@media (max-width:800px) {
 #how-it-works.how-timeline-active .how-timeline-pin { padding:16px 0 max(10px,env(safe-area-inset-bottom)); }
 #how-it-works.how-timeline-active .cp-auction-layout { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); gap:16px; }
 #how-it-works.how-timeline-active .cp-auction-copy { align-self:start; }
 #how-it-works.how-timeline-active .cp-auction-eyebrow { margin-bottom:10px; font-size:10px; }
 #how-it-works.how-timeline-active h2 { font-size:clamp(26px,7vw,40px); line-height:1.03; }
 #how-it-works.how-timeline-active h2 br:nth-of-type(2) { display:none; }
 #how-it-works.how-timeline-active .cp-auction-copy > p { display:none; }
 #how-it-works.how-timeline-active .cp-auction-copy > .cp-auction-link { margin-top:12px; font-size:12px; }
 #how-it-works.how-timeline-active .cp-auction-card { padding:22px 18px; border-radius:12px; }
 #how-it-works.how-timeline-active .how-timeline-nav { flex-basis:78px; margin-top:10px; }
 #how-it-works .how-timeline-stop { min-height:74px; padding-inline:2px; font-size:10px; }
 #how-it-works.how-timeline-active .cp-how-footer { padding-top:0; }
 #how-it-works.how-timeline-active .cp-how-footer > span { display:none; }
 #how-it-works.how-timeline-active .cp-how-footer .cp-auction-link { min-height:32px; font-size:10px; }
}
@media (prefers-reduced-motion:reduce) {
 #how-it-works .how-timeline-cursor,#how-it-works .how-timeline-fill { transition:none; }
}
@media (max-width:800px) and (max-height:740px) {
 #how-it-works.how-timeline-active .how-timeline-pin { padding:12px 0 max(8px,env(safe-area-inset-bottom)); }
 #how-it-works.how-timeline-active .cp-auction-layout { gap:12px; }
 #how-it-works.how-timeline-active .cp-auction-eyebrow { margin-bottom:8px; }
 #how-it-works.how-timeline-active h2 { font-size:clamp(26px,6.8vw,32px); }
 #how-it-works.how-timeline-active .cp-auction-copy > .cp-auction-link { margin-top:8px; }
 #how-it-works.how-timeline-active .cp-auction-card { padding:18px 16px; }
 #how-it-works.how-timeline-active .cp-auction-card-top > span:first-child { font-size:36px; }
 #how-it-works.how-timeline-active .how-card-icon > svg { width:28px; height:28px; }
 #how-it-works.how-timeline-active .cp-auction-card h3 { font-size:22px; margin:10px 0 12px; }
 #how-it-works.how-timeline-active .how-timeline-nav { flex-basis:70px; margin-top:8px; }
 #how-it-works.how-timeline-active .how-timeline-stop { min-height:68px; gap:14px; }
 #how-it-works.how-timeline-active .how-timeline-pin > .cp-shell:last-child { display:none; }
}

/* Short landscape screens keep the introduction beside the card. */
@media (min-width:620px) and (max-height:500px) {
 #how-it-works.how-timeline-active .how-timeline-pin { padding:10px 0 max(8px,env(safe-area-inset-bottom)); }
 #how-it-works.how-timeline-active .cp-auction-layout { display:grid; grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr); grid-template-rows:minmax(0,1fr); gap:18px; }
 #how-it-works.how-timeline-active .cp-auction-copy { align-self:center; }
 #how-it-works.how-timeline-active .cp-auction-eyebrow { margin-bottom:8px; font-size:9px; }
 #how-it-works.how-timeline-active h2 { font-size:clamp(26px,4vw,34px); }
 #how-it-works.how-timeline-active h2 br:nth-of-type(2) { display:block; }
 #how-it-works.how-timeline-active .cp-auction-copy > p { display:none; }
 #how-it-works.how-timeline-active .cp-auction-copy > .cp-auction-link { margin-top:12px; font-size:11px; min-height:32px; }
 #how-it-works.how-timeline-active .cp-auction-card { --how-visual-min:112px; padding:16px; }
 #how-it-works.how-timeline-active .cp-auction-card-top { position:absolute; top:16px; left:16px; right:16px; height:30px; }
 #how-it-works.how-timeline-active .cp-auction-card-top > span:first-child { font-size:30px; }
 #how-it-works.how-timeline-active .how-card-icon > svg { width:24px; height:24px; }
 #how-it-works.how-timeline-active .cp-auction-card h3 { display:flex; align-items:center; min-height:32px; margin:0 30px 12px 46px; font-size:clamp(17px,2.5vw,24px); }
 #how-it-works.how-timeline-active .how-bracket { height:100px; }
 #how-it-works.how-timeline-active .how-bracket-team { width:32px; height:34px; }
 #how-it-works.how-timeline-active .how-crest { width:23px; height:27px; }
 #how-it-works.how-timeline-active .how-fixtures { padding:5px; }
 #how-it-works.how-timeline-active .how-calendar-dots { gap:6px 3px; padding-top:8px; }
 #how-it-works.how-timeline-active .how-role { padding:7px 5px; font-size:9px; gap:4px; }
 #how-it-works.how-timeline-active .how-role svg { width:14px; height:14px; }
 #how-it-works.how-timeline-active .how-profile { max-width:70px; }
 #how-it-works.how-timeline-active .how-report-photo { display:none; }
 #how-it-works.how-timeline-active .how-wagon { max-width:88px; }
 #how-it-works.how-timeline-active .how-timeline-nav { flex-basis:58px; margin-top:4px; }
 #how-it-works.how-timeline-active .how-timeline-stop { min-height:58px; gap:9px; padding-bottom:4px; font-size:10px; }
 #how-it-works.how-timeline-active .how-timeline-pin > .cp-shell:last-child { display:none; }
}

/* Natural-flow fallback remains readable at high zoom and with reduced motion. */
#how-it-works:not(.how-timeline-active) .cp-auction-copy { min-width:0; }
#how-it-works:not(.how-timeline-active) h2 { font-size:clamp(34px,7vw,82px); overflow-wrap:break-word; }
@media (max-width:480px) {
 #how-it-works:not(.how-timeline-active) .cp-auction-card { padding:20px 16px; }
 #how-it-works:not(.how-timeline-active) .how-timeline-stop { font-size:10px; }
}