/* ===== athleteXhub feature blocks · shared base (identical in every block) ===== */
.axh-feat{
  --f-bg:#F1F1F2; --f-card:#FFFFFF; --f-line:#F0F0F1; --f-line-2:#F0F0F1; --f-ink:#242426; --f-black:#0B0B0C;
  --f-muted:#6B6B6F; --f-soft:#F1F1F2; --f-accent:#EDFF00;
  --f-green:#444444; --f-green-bg:#F3F3F4; --f-green-line:#F0F0F1;
  --f-orange:#444444; --f-orange-bg:#F7F7F7; --f-orange-line:#F0F0F1;
  --f-gray:#444444; --f-gray-bg:#F3F3F4;
  --f-ease:cubic-bezier(.2,.7,.2,1);
  container:axhfeat / inline-size;
  display:block; position:relative; box-sizing:border-box; width:100%; margin:0; padding:8px;
  background:#FFFFFF; border:1px solid var(--f-line); border-radius:28px;
  font-family:Poppins,"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:14px; font-weight:400; line-height:1.45; color:var(--f-ink); text-align:left; letter-spacing:0;
  -webkit-font-smoothing:antialiased;
}
.axh-feat *, .axh-feat *::before, .axh-feat *::after{box-sizing:border-box}
.axh-feat div,.axh-feat span,.axh-feat p,.axh-feat h3,.axh-feat ul,.axh-feat li,.axh-feat img,
.axh-feat figcaption,.axh-feat strong,.axh-feat i{
  margin:0; padding:0; border:0; background:none; box-shadow:none; text-transform:none; float:none;
  font:inherit; color:inherit; letter-spacing:inherit; line-height:inherit; text-decoration:none; text-shadow:none;
}
.axh-feat ul,.axh-feat li{list-style:none}
.axh-feat li::before,.axh-feat li::marker{content:none}
.axh-feat img{display:block; max-width:none; border-radius:0}
.axh-feat .axh-feat-ic{width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

/* Panel + cropped UI fragment */
.axh-feat .axh-feat-panel{position:relative; height:clamp(280px,66cqw,360px); overflow:hidden; border-radius:21px; background:var(--f-bg)}
.axh-feat .axh-feat-wrap{position:absolute; inset:0;
  -webkit-mask-image:linear-gradient(to bottom,#000000 74%,transparent 97%); mask-image:linear-gradient(to bottom,#000000 74%,transparent 97%);
  transition:opacity .35s ease}
.axh-feat.axh-feat-resetting .axh-feat-wrap,.axh-feat.axh-feat-resetting .axh-feat-toast{opacity:0}
.axh-feat .axh-feat-ui{position:absolute; left:50%; top:28px; width:min(440px,calc(100% - 40px)); transform:translateX(-50%);
  background:var(--f-card); border:1px solid var(--f-line); border-radius:20px; padding:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 16px 36px -18px rgba(0,0,0,.16)}

/* Atoms (mirroring the athleteXhub app) */
.axh-feat .axh-feat-name{display:block; font-size:13.5px; font-weight:500; line-height:1.3; color:var(--f-ink)}
.axh-feat .axh-feat-meta{display:block; font-size:11.5px; font-weight:300; color:var(--f-muted); line-height:1.4}
.axh-feat .axh-feat-ell{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.axh-feat .axh-feat-grow{flex:1; min-width:0; display:block}
.axh-feat .axh-feat-grow > .axh-feat-name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.axh-feat .axh-feat-row{display:flex; align-items:center; gap:10px}
.axh-feat .axh-feat-av{flex:none; width:34px; height:34px; border-radius:50%; object-fit:cover; object-position:50% 30%; background:var(--f-soft)}
.axh-feat .axh-feat-av-i{display:inline-grid; place-items:center; font-size:11px; font-weight:500; background:#F0F0F1; border:1px solid var(--f-line)}
.axh-feat .axh-feat-tile{flex:none; display:inline-grid; place-items:center; width:34px; height:34px; border-radius:11px; background:var(--f-soft); color:var(--f-ink)}
.axh-feat .axh-feat-tile-ink{background:var(--f-black); color:#FFFFFF}
.axh-feat .axh-feat-badge{display:inline-flex; align-items:center; white-space:nowrap; height:22px; padding:0 9px; border-radius:999px; font-size:11px; font-weight:500; border:1px solid transparent}
.axh-feat .axh-feat-badge-gray{background:var(--f-gray-bg); color:var(--f-gray); border-color:var(--f-line)}
.axh-feat .axh-feat-badge-green{background:var(--f-green-bg); color:var(--f-green); border-color:var(--f-green-line)}
.axh-feat .axh-feat-badge-orange{background:var(--f-orange-bg); color:var(--f-orange); border-color:var(--f-orange-line)}
.axh-feat .axh-feat-pill{display:inline-grid; align-items:center; height:30px; padding:0 12px; border-radius:999px; border:1px solid var(--f-line); background:#FFFFFF; font-size:12px; white-space:nowrap; transition:background .35s var(--f-ease), color .35s var(--f-ease), border-color .35s}
.axh-feat .axh-feat-bar{display:block; height:5px; border-radius:5px; background:var(--f-soft); overflow:hidden}
.axh-feat .axh-feat-bar i{display:block; height:100%; border-radius:5px; background:var(--f-ink); transition:width .7s var(--f-ease)}
.axh-feat .axh-feat-stack{display:inline-grid; justify-items:end}
.axh-feat .axh-feat-stack > *{grid-area:1/1; opacity:0; transform:translateY(3px); transition:opacity .35s var(--f-ease), transform .35s var(--f-ease)}
.axh-feat .axh-feat-stack > :first-child{opacity:1; transform:none}
.axh-feat .axh-feat-in{opacity:0; transform:translateY(10px); transition:opacity .5s var(--f-ease), transform .55s var(--f-ease)}

/* Toast (outside the fading mask) */
.axh-feat .axh-feat-toast{position:absolute; left:50%; bottom:18px; z-index:4; display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px 0 12px; border-radius:999px;
  background:var(--f-black); color:#FFFFFF; font-size:12.5px; font-weight:500; white-space:nowrap;
  opacity:0; transform:translate(-50%,8px); transition:opacity .4s var(--f-ease), transform .45s var(--f-ease)}
.axh-feat .axh-feat-toast .axh-feat-ic{stroke:var(--f-accent); stroke-width:2.4; width:15px; height:15px}

/* Brand cursor */
.axh-feat .axh-feat-cursor{position:absolute; z-index:5; left:0; top:0; pointer-events:none; opacity:0; transition:transform .9s cubic-bezier(.45,.05,.2,1), opacity .3s}
.axh-feat .axh-feat-cursor.is-on{opacity:1}
.axh-feat .axh-feat-cursor.is-jump{transition:none}
.axh-feat .axh-feat-cursor svg{display:block; width:20px; height:20px; fill:var(--f-black); stroke:#FFFFFF; stroke-width:1.4; stroke-linejoin:round; transition:transform .15s}
.axh-feat .axh-feat-cursor.is-press svg{transform:scale(.8)}
.axh-feat .axh-feat-cursor.is-flip span{left:auto; right:8px; top:19px}
.axh-feat .axh-feat-cursor span{position:absolute; left:15px; top:17px; padding:2px 8px; border-radius:999px; background:var(--f-accent); color:var(--f-black); font-size:11px; font-weight:600; white-space:nowrap; box-shadow:0 2px 6px rgba(0,0,0,.18)}

/* Caption */
.axh-feat .axh-feat-cap{display:block; padding:18px 14px 12px}
.axh-feat .axh-feat-cap-t{display:flex; align-items:center; gap:10px; font-size:16px; font-weight:500; line-height:1.3; color:var(--f-black)}
.axh-feat .axh-feat-cap-ic{display:inline-grid; place-items:center; flex:none; width:28px; height:28px; border-radius:50%; border:1px solid var(--f-line)}
.axh-feat .axh-feat-cap-ic .axh-feat-ic{width:14px; height:14px}
.axh-feat .axh-feat-cap-p{margin-top:8px; font-size:14px; font-weight:300; color:var(--f-muted); max-width:44ch}
.axh-feat[data-caption="off"]{padding:0; border:0; background:none}
.axh-feat[data-caption="off"] .axh-feat-panel{border-radius:24px}
.axh-feat[data-caption="off"] .axh-feat-cap{display:none}

/* No-JS: show final layout */
.axh-feat:not(.axh-feat-ready) .axh-feat-in{opacity:1; transform:none}
/* Reduced motion */
.axh-feat.axh-feat-reduced *,.axh-feat.axh-feat-reduced *::before,.axh-feat.axh-feat-reduced *::after{transition:none !important; animation:none !important}

@container axhfeat (max-width: 380px){
  .axh-feat .axh-feat-panel{height:300px}
  .axh-feat .axh-feat-ui{top:20px; width:calc(100% - 28px); padding:14px}
  .axh-feat .axh-feat-cap{padding:16px 10px 10px}
}
.axh-feat.axh-feat-profile .axh-feat-pr-browser{padding:0; overflow:hidden}
.axh-feat.axh-feat-profile .axh-feat-pr-chrome{display:flex; align-items:flex-end; gap:12px; height:40px; padding:0 12px; background:#F3F3F4; border-bottom:1px solid var(--f-line)}
.axh-feat.axh-feat-profile .axh-feat-pr-dots{display:flex; gap:5px; align-self:center}
.axh-feat.axh-feat-profile .axh-feat-pr-dots i{display:block; width:8px; height:8px; border-radius:50%; background:#F0F0F1}
.axh-feat.axh-feat-profile .axh-feat-pr-tab{display:flex; align-items:center; gap:8px; min-width:0; max-width:240px; height:32px; padding:0 12px 0 8px; margin-bottom:-1px;
  background:#FFFFFF; border:1px solid var(--f-line); border-bottom-color:#FFFFFF; border-radius:10px 10px 0 0; font-size:11.5px; color:var(--f-ink)}
.axh-feat.axh-feat-profile .axh-feat-pr-fav{flex:none; display:inline-grid; place-items:center; width:16px; height:16px; border-radius:5px; background:var(--f-black); color:var(--f-accent); font-size:10px; font-weight:700}
.axh-feat.axh-feat-profile .axh-feat-pr-url{display:flex; align-items:center; gap:8px; margin:10px 12px 0; height:34px; padding:0 4px 0 12px; border-radius:999px; background:var(--f-soft); font-size:11.5px; color:var(--f-muted)}
.axh-feat.axh-feat-profile .axh-feat-pr-url > .axh-feat-ic{width:13px; height:13px}
.axh-feat.axh-feat-profile .axh-feat-pr-addr{flex:1; min-width:0}
.axh-feat.axh-feat-profile .axh-feat-pr-btn{display:inline-flex; align-items:center; height:26px; padding:0 12px; border-radius:999px; background:#242426; color:#F7F7F7; font-size:11px; font-weight:500; white-space:nowrap}
.axh-feat.axh-feat-profile .axh-feat-pr-state .axh-feat-badge{height:26px}
.axh-feat.axh-feat-profile .axh-feat-pr-live{width:6px; height:6px; border-radius:50%; background:#6B6B6F; margin-right:6px}
.axh-feat.axh-feat-profile .axh-feat-pr-load{display:block; height:2px; margin:10px 12px 0; border-radius:2px; background:var(--f-line-2); overflow:hidden}
.axh-feat.axh-feat-profile .axh-feat-pr-load i{display:block; height:100%; width:8%; background:var(--f-ink); transition:width .8s var(--f-ease)}
.axh-feat.axh-feat-profile .axh-feat-pr-body{padding:16px 18px 20px}
.axh-feat.axh-feat-profile .axh-feat-pr-swap{display:grid}
.axh-feat.axh-feat-profile .axh-feat-pr-swap > *{grid-area:1/1; transition:opacity .45s var(--f-ease), transform .45s var(--f-ease)}
.axh-feat.axh-feat-profile .axh-feat-pr-real{opacity:0; transform:translateY(4px)}
.axh-feat.axh-feat-profile .axh-feat-pr-sk{display:block; align-self:center; height:12px; border-radius:6px; background:linear-gradient(90deg,#F0F0F1,#F0F0F1)}
.axh-feat.axh-feat-profile .axh-feat-pr-avwrap{flex:none; width:56px; height:56px}
.axh-feat.axh-feat-profile .axh-feat-pr-sk-av{width:56px; height:56px; border-radius:50%}
.axh-feat.axh-feat-profile .axh-feat-pr-av{width:56px; height:56px; border-radius:50%; object-fit:cover; object-position:50% 25%; background:var(--f-soft)}
.axh-feat.axh-feat-profile .axh-feat-pr-name{display:block; font-size:17px; font-weight:500; line-height:1.3}
.axh-feat.axh-feat-profile .axh-feat-pr-verified{flex:none; display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--f-accent); color:var(--f-black); opacity:0; transform:scale(.6); transition:opacity .35s var(--f-ease), transform .45s var(--f-ease)}
.axh-feat.axh-feat-profile .axh-feat-pr-verified .axh-feat-ic{width:15px; height:15px; stroke-width:2.2}
.axh-feat.axh-feat-profile .axh-feat-pr-tabs{display:flex; gap:18px; margin:16px 0 14px; border-bottom:1px solid var(--f-line-2); font-size:11.5px; color:var(--f-muted)}
.axh-feat.axh-feat-profile .axh-feat-pr-tabs span{padding-bottom:9px; white-space:nowrap}
.axh-feat.axh-feat-profile .axh-feat-pr-tabs .is-on{color:var(--f-ink); box-shadow:inset 0 -1.5px 0 var(--f-ink)}
.axh-feat.axh-feat-profile .axh-feat-pr-goal{margin-top:4px; min-height:22px; font-size:14px; font-weight:400}
.axh-feat.axh-feat-profile .axh-feat-pr-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.axh-feat.axh-feat-profile .axh-feat-pr-chip{display:inline-flex; align-items:center; height:26px; padding:0 11px; border-radius:999px; border:1px solid var(--f-line); font-size:11.5px; opacity:0; transform:translateY(6px); transition:opacity .4s var(--f-ease), transform .45s var(--f-ease)}
.axh-feat.axh-feat-profile .axh-feat-pr-chip:nth-child(2){transition-delay:.1s}
.axh-feat.axh-feat-profile .axh-feat-pr-chip:nth-child(3){transition-delay:.2s}
.axh-feat.axh-feat-profile .axh-feat-pr-n{display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#FFFFFF; color:var(--f-black); font-size:10px; font-weight:700}
/* phases */
.axh-feat.axh-feat-profile.axh-feat-p1 .axh-feat-pr-row1 .axh-feat-pr-sk{opacity:0}
.axh-feat.axh-feat-profile.axh-feat-p1 .axh-feat-row .axh-feat-pr-sk{opacity:0}
.axh-feat.axh-feat-profile.axh-feat-p1 .axh-feat-row .axh-feat-pr-real{opacity:1; transform:none}
.axh-feat.axh-feat-profile.axh-feat-p1 .axh-feat-pr-load i{width:45%}
.axh-feat.axh-feat-profile.axh-feat-p2 .axh-feat-pr-goal .axh-feat-pr-sk{opacity:0}
.axh-feat.axh-feat-profile.axh-feat-p2 .axh-feat-pr-goal .axh-feat-pr-real{opacity:1; transform:none}
.axh-feat.axh-feat-profile.axh-feat-p2 .axh-feat-pr-chip{opacity:1; transform:none}
.axh-feat.axh-feat-profile.axh-feat-p2 .axh-feat-pr-load i{width:100%}
.axh-feat.axh-feat-profile.axh-feat-p3 .axh-feat-pr-state > :first-child{opacity:0}
.axh-feat.axh-feat-profile.axh-feat-p3 .axh-feat-pr-state > :last-child{opacity:1; transform:none}
.axh-feat.axh-feat-profile.axh-feat-p3 .axh-feat-pr-verified{opacity:1; transform:none}
.axh-feat.axh-feat-profile.axh-feat-p3 .axh-feat-pr-load{opacity:0; transition:opacity .4s .3s}
.axh-feat.axh-feat-profile.axh-feat-p4 .axh-feat-toast{opacity:1; transform:translate(-50%,0)}
.axh-feat.axh-feat-profile:not(.axh-feat-ready) .axh-feat-pr-sk{opacity:0}
.axh-feat.axh-feat-profile:not(.axh-feat-ready) .axh-feat-pr-real,.axh-feat.axh-feat-profile:not(.axh-feat-ready) .axh-feat-pr-chip,.axh-feat.axh-feat-profile:not(.axh-feat-ready) .axh-feat-pr-verified{opacity:1; transform:none}
@container axhfeat (max-width: 420px){
  .axh-feat.axh-feat-profile .axh-feat-pr-tab{max-width:170px}
  .axh-feat.axh-feat-profile .axh-feat-pr-body{padding:14px 14px 18px}
  .axh-feat.axh-feat-profile .axh-feat-pr-tabs{gap:14px}
}


/* ===== athleteXhub feature blocks · shared base (identical in every block) ===== */
.axh-feat{
  --f-bg:#F1F1F2; --f-card:#FFFFFF; --f-line:#F0F0F1; --f-line-2:#F0F0F1; --f-ink:#242426; --f-black:#0B0B0C;
  --f-muted:#6B6B6F; --f-soft:#F1F1F2; --f-accent:#EDFF00;
  --f-green:#444444; --f-green-bg:#F3F3F4; --f-green-line:#F0F0F1;
  --f-orange:#444444; --f-orange-bg:#F7F7F7; --f-orange-line:#F0F0F1;
  --f-gray:#444444; --f-gray-bg:#F3F3F4;
  --f-ease:cubic-bezier(.2,.7,.2,1);
  container:axhfeat / inline-size;
  display:block; position:relative; box-sizing:border-box; width:100%; margin:0; padding:8px;
  background:#FFFFFF; border:1px solid var(--f-line); border-radius:28px;
  font-family:Poppins,"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:14px; font-weight:400; line-height:1.45; color:var(--f-ink); text-align:left; letter-spacing:0;
  -webkit-font-smoothing:antialiased;
}
.axh-feat *, .axh-feat *::before, .axh-feat *::after{box-sizing:border-box}
.axh-feat div,.axh-feat span,.axh-feat p,.axh-feat h3,.axh-feat ul,.axh-feat li,.axh-feat img,
.axh-feat figcaption,.axh-feat strong,.axh-feat i{
  margin:0; padding:0; border:0; background:none; box-shadow:none; text-transform:none; float:none;
  font:inherit; color:inherit; letter-spacing:inherit; line-height:inherit; text-decoration:none; text-shadow:none;
}
.axh-feat ul,.axh-feat li{list-style:none}
.axh-feat li::before,.axh-feat li::marker{content:none}
.axh-feat img{display:block; max-width:none; border-radius:0}
.axh-feat .axh-feat-ic{width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

/* Panel + cropped UI fragment */
.axh-feat .axh-feat-panel{position:relative; height:clamp(280px,66cqw,360px); overflow:hidden; border-radius:21px; background:var(--f-bg)}
.axh-feat .axh-feat-wrap{position:absolute; inset:0;
  -webkit-mask-image:linear-gradient(to bottom,#000000 74%,transparent 97%); mask-image:linear-gradient(to bottom,#000000 74%,transparent 97%);
  transition:opacity .35s ease}
.axh-feat.axh-feat-resetting .axh-feat-wrap,.axh-feat.axh-feat-resetting .axh-feat-toast{opacity:0}
.axh-feat .axh-feat-ui{position:absolute; left:50%; top:28px; width:min(440px,calc(100% - 40px)); transform:translateX(-50%);
  background:var(--f-card); border:1px solid var(--f-line); border-radius:20px; padding:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 16px 36px -18px rgba(0,0,0,.16)}

/* Atoms (mirroring the athleteXhub app) */
.axh-feat .axh-feat-name{display:block; font-size:13.5px; font-weight:500; line-height:1.3; color:var(--f-ink)}
.axh-feat .axh-feat-meta{display:block; font-size:11.5px; font-weight:300; color:var(--f-muted); line-height:1.4}
.axh-feat .axh-feat-ell{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.axh-feat .axh-feat-grow{flex:1; min-width:0; display:block}
.axh-feat .axh-feat-grow > .axh-feat-name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.axh-feat .axh-feat-row{display:flex; align-items:center; gap:10px}
.axh-feat .axh-feat-av{flex:none; width:34px; height:34px; border-radius:50%; object-fit:cover; object-position:50% 30%; background:var(--f-soft)}
.axh-feat .axh-feat-av-i{display:inline-grid; place-items:center; font-size:11px; font-weight:500; background:#F0F0F1; border:1px solid var(--f-line)}
.axh-feat .axh-feat-tile{flex:none; display:inline-grid; place-items:center; width:34px; height:34px; border-radius:11px; background:var(--f-soft); color:var(--f-ink)}
.axh-feat .axh-feat-tile-ink{background:var(--f-black); color:#FFFFFF}
.axh-feat .axh-feat-badge{display:inline-flex; align-items:center; white-space:nowrap; height:22px; padding:0 9px; border-radius:999px; font-size:11px; font-weight:500; border:1px solid transparent}
.axh-feat .axh-feat-badge-gray{background:var(--f-gray-bg); color:var(--f-gray); border-color:var(--f-line)}
.axh-feat .axh-feat-badge-green{background:var(--f-green-bg); color:var(--f-green); border-color:var(--f-green-line)}
.axh-feat .axh-feat-badge-orange{background:var(--f-orange-bg); color:var(--f-orange); border-color:var(--f-orange-line)}
.axh-feat .axh-feat-pill{display:inline-grid; align-items:center; height:30px; padding:0 12px; border-radius:999px; border:1px solid var(--f-line); background:#FFFFFF; font-size:12px; white-space:nowrap; transition:background .35s var(--f-ease), color .35s var(--f-ease), border-color .35s}
.axh-feat .axh-feat-bar{display:block; height:5px; border-radius:5px; background:var(--f-soft); overflow:hidden}
.axh-feat .axh-feat-bar i{display:block; height:100%; border-radius:5px; background:var(--f-ink); transition:width .7s var(--f-ease)}
.axh-feat .axh-feat-stack{display:inline-grid; justify-items:end}
.axh-feat .axh-feat-stack > *{grid-area:1/1; opacity:0; transform:translateY(3px); transition:opacity .35s var(--f-ease), transform .35s var(--f-ease)}
.axh-feat .axh-feat-stack > :first-child{opacity:1; transform:none}
.axh-feat .axh-feat-in{opacity:0; transform:translateY(10px); transition:opacity .5s var(--f-ease), transform .55s var(--f-ease)}

/* Toast (outside the fading mask) */
.axh-feat .axh-feat-toast{position:absolute; left:50%; bottom:18px; z-index:4; display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px 0 12px; border-radius:999px;
  background:var(--f-black); color:#FFFFFF; font-size:12.5px; font-weight:500; white-space:nowrap;
  opacity:0; transform:translate(-50%,8px); transition:opacity .4s var(--f-ease), transform .45s var(--f-ease)}
.axh-feat .axh-feat-toast .axh-feat-ic{stroke:var(--f-accent); stroke-width:2.4; width:15px; height:15px}

/* Brand cursor */
.axh-feat .axh-feat-cursor{position:absolute; z-index:5; left:0; top:0; pointer-events:none; opacity:0; transition:transform .9s cubic-bezier(.45,.05,.2,1), opacity .3s}
.axh-feat .axh-feat-cursor.is-on{opacity:1}
.axh-feat .axh-feat-cursor.is-jump{transition:none}
.axh-feat .axh-feat-cursor svg{display:block; width:20px; height:20px; fill:var(--f-black); stroke:#FFFFFF; stroke-width:1.4; stroke-linejoin:round; transition:transform .15s}
.axh-feat .axh-feat-cursor.is-press svg{transform:scale(.8)}
.axh-feat .axh-feat-cursor.is-flip span{left:auto; right:8px; top:19px}
.axh-feat .axh-feat-cursor span{position:absolute; left:15px; top:17px; padding:2px 8px; border-radius:999px; background:var(--f-accent); color:var(--f-black); font-size:11px; font-weight:600; white-space:nowrap; box-shadow:0 2px 6px rgba(0,0,0,.18)}

/* Caption */
.axh-feat .axh-feat-cap{display:block; padding:18px 14px 12px}
.axh-feat .axh-feat-cap-t{display:flex; align-items:center; gap:10px; font-size:16px; font-weight:500; line-height:1.3; color:var(--f-black)}
.axh-feat .axh-feat-cap-ic{display:inline-grid; place-items:center; flex:none; width:28px; height:28px; border-radius:50%; border:1px solid var(--f-line)}
.axh-feat .axh-feat-cap-ic .axh-feat-ic{width:14px; height:14px}
.axh-feat .axh-feat-cap-p{margin-top:8px; font-size:14px; font-weight:300; color:var(--f-muted); max-width:44ch}
.axh-feat[data-caption="off"]{padding:0; border:0; background:none}
.axh-feat[data-caption="off"] .axh-feat-panel{border-radius:24px}
.axh-feat[data-caption="off"] .axh-feat-cap{display:none}

/* No-JS: show final layout */
.axh-feat:not(.axh-feat-ready) .axh-feat-in{opacity:1; transform:none}
/* Reduced motion */
.axh-feat.axh-feat-reduced *,.axh-feat.axh-feat-reduced *::before,.axh-feat.axh-feat-reduced *::after{transition:none !important; animation:none !important}

@container axhfeat (max-width: 380px){
  .axh-feat .axh-feat-panel{height:300px}
  .axh-feat .axh-feat-ui{top:20px; width:calc(100% - 28px); padding:14px}
  .axh-feat .axh-feat-cap{padding:16px 10px 10px}
}
.axh-feat.axh-feat-academy .axh-feat-ui{padding:18px 18px 8px}
.axh-feat.axh-feat-academy .axh-feat-y-head{color:var(--f-muted)}
.axh-feat.axh-feat-academy .axh-feat-y-head{gap:8px}
.axh-feat.axh-feat-academy .axh-feat-y-count{font-size:11.5px; color:var(--f-muted); font-variant-numeric:tabular-nums}
.axh-feat.axh-feat-academy .axh-feat-y-count strong{font-weight:600; color:var(--f-ink)}
.axh-feat.axh-feat-academy .axh-feat-y-title{margin:10px 0 12px; font-size:19px; font-weight:400; line-height:1.25; letter-spacing:-.02em; color:var(--f-black)}
.axh-feat.axh-feat-academy .axh-feat-y-prog{height:4px}
.axh-feat.axh-feat-academy .axh-feat-panel{height:clamp(320px,74cqw,380px)}
.axh-feat.axh-feat-academy .axh-feat-wrap{-webkit-mask-image:linear-gradient(to bottom,#000000 88%,transparent 100%); mask-image:linear-gradient(to bottom,#000000 88%,transparent 100%)}
.axh-feat.axh-feat-academy .axh-feat-y-fill{width:33%}
.axh-feat.axh-feat-academy .axh-feat-y-list{margin-top:8px}
.axh-feat.axh-feat-academy .axh-feat-y-row{display:flex; align-items:center; gap:12px; height:54px; border-top:1px solid var(--f-line-2); transition:background .4s var(--f-ease)}
.axh-feat.axh-feat-academy .axh-feat-y-ic{flex:none; display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%}
.axh-feat.axh-feat-academy .axh-feat-y-row.is-done .axh-feat-y-ic,.axh-feat.axh-feat-academy .axh-feat-y-check{background:var(--f-green-bg); color:#444444; border:1px solid var(--f-green-line)}
.axh-feat.axh-feat-academy .axh-feat-y-check,.axh-feat.axh-feat-academy .axh-feat-y-play{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%}
.axh-feat.axh-feat-academy .axh-feat-y-ic .axh-feat-ic{width:14px; height:14px; stroke-width:2}
.axh-feat.axh-feat-academy .axh-feat-y-play{background:var(--f-black); color:#FFFFFF}
.axh-feat.axh-feat-academy .axh-feat-y-play svg{width:13px; height:13px; fill:currentColor; margin-left:1px}
.axh-feat.axh-feat-academy .axh-feat-y-empty{border:1.5px dashed #F0F0F1}
.axh-feat.axh-feat-academy .axh-feat-y-n{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:11px; color:var(--f-muted)}
.axh-feat.axh-feat-academy .axh-feat-y-end{justify-items:end}
.axh-feat.axh-feat-academy .axh-feat-y-next{background:var(--f-accent); color:var(--f-black); border-color:transparent; font-weight:600}
.axh-feat.axh-feat-academy .axh-feat-y-sub{display:flex; align-items:center; gap:8px}
.axh-feat.axh-feat-academy .axh-feat-y-lbar{flex:1; max-width:120px; height:3px; opacity:0; transition:opacity .3s}
.axh-feat.axh-feat-academy .axh-feat-y-lbar i{width:0; transition:none}
.axh-feat.axh-feat-academy.axh-feat-p2 .axh-feat-y-lbar i{transition:width 2.1s linear}
/* phases */
.axh-feat.axh-feat-academy.axh-feat-p2 .axh-feat-y-lbar{opacity:1}
.axh-feat.axh-feat-academy.axh-feat-p2 .axh-feat-y-lbar i{width:100%}
.axh-feat.axh-feat-academy.axh-feat-p2 .axh-feat-y-r2{background:linear-gradient(90deg,rgba(241,241,242,.0),rgba(241,241,242,.9) 12%,rgba(241,241,242,.9) 88%,rgba(241,241,242,0))}
.axh-feat.axh-feat-academy.axh-feat-p3 .axh-feat-y-r2{background:none}
.axh-feat.axh-feat-academy.axh-feat-p3 .axh-feat-y-lbar{opacity:0}
.axh-feat.axh-feat-academy.axh-feat-p3 [data-target="play"] > :first-child{opacity:0}
.axh-feat.axh-feat-academy.axh-feat-p3 [data-target="play"] > :last-child{opacity:1; transform:none}
.axh-feat.axh-feat-academy.axh-feat-p3 .axh-feat-y-fill{width:67%}
.axh-feat.axh-feat-academy.axh-feat-p4 .axh-feat-y-end > :first-child{opacity:0}
.axh-feat.axh-feat-academy.axh-feat-p4 .axh-feat-y-end > :last-child{opacity:1; transform:none}
.axh-feat.axh-feat-academy.axh-feat-p4 .axh-feat-y-r3 .axh-feat-y-empty{border-color:var(--f-ink)}
.axh-feat.axh-feat-academy.axh-feat-reduced .axh-feat-y-lbar{opacity:0}
@container axhfeat (max-width: 420px){
  .axh-feat.axh-feat-academy .axh-feat-panel{height:350px}
  .axh-feat.axh-feat-academy .axh-feat-y-title{font-size:17px}
}


/* ===== athleteXhub feature blocks · shared base (identical in every block) ===== */
.axh-feat{
  --f-bg:#F1F1F2; --f-card:#FFFFFF; --f-line:#F0F0F1; --f-line-2:#F0F0F1; --f-ink:#242426; --f-black:#0B0B0C;
  --f-muted:#6B6B6F; --f-soft:#F1F1F2; --f-accent:#EDFF00;
  --f-green:#444444; --f-green-bg:#F3F3F4; --f-green-line:#F0F0F1;
  --f-orange:#444444; --f-orange-bg:#F7F7F7; --f-orange-line:#F0F0F1;
  --f-gray:#444444; --f-gray-bg:#F3F3F4;
  --f-ease:cubic-bezier(.2,.7,.2,1);
  container:axhfeat / inline-size;
  display:block; position:relative; box-sizing:border-box; width:100%; margin:0; padding:8px;
  background:#FFFFFF; border:1px solid var(--f-line); border-radius:28px;
  font-family:Poppins,"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:14px; font-weight:400; line-height:1.45; color:var(--f-ink); text-align:left; letter-spacing:0;
  -webkit-font-smoothing:antialiased;
}
.axh-feat *, .axh-feat *::before, .axh-feat *::after{box-sizing:border-box}
.axh-feat div,.axh-feat span,.axh-feat p,.axh-feat h3,.axh-feat ul,.axh-feat li,.axh-feat img,
.axh-feat figcaption,.axh-feat strong,.axh-feat i{
  margin:0; padding:0; border:0; background:none; box-shadow:none; text-transform:none; float:none;
  font:inherit; color:inherit; letter-spacing:inherit; line-height:inherit; text-decoration:none; text-shadow:none;
}
.axh-feat ul,.axh-feat li{list-style:none}
.axh-feat li::before,.axh-feat li::marker{content:none}
.axh-feat img{display:block; max-width:none; border-radius:0}
.axh-feat .axh-feat-ic{width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

/* Panel + cropped UI fragment */
.axh-feat .axh-feat-panel{position:relative; height:clamp(280px,66cqw,360px); overflow:hidden; border-radius:21px; background:var(--f-bg)}
.axh-feat .axh-feat-wrap{position:absolute; inset:0;
  -webkit-mask-image:linear-gradient(to bottom,#000000 74%,transparent 97%); mask-image:linear-gradient(to bottom,#000000 74%,transparent 97%);
  transition:opacity .35s ease}
.axh-feat.axh-feat-resetting .axh-feat-wrap,.axh-feat.axh-feat-resetting .axh-feat-toast{opacity:0}
.axh-feat .axh-feat-ui{position:absolute; left:50%; top:28px; width:min(440px,calc(100% - 40px)); transform:translateX(-50%);
  background:var(--f-card); border:1px solid var(--f-line); border-radius:20px; padding:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 16px 36px -18px rgba(0,0,0,.16)}

/* Atoms (mirroring the athleteXhub app) */
.axh-feat .axh-feat-name{display:block; font-size:13.5px; font-weight:500; line-height:1.3; color:var(--f-ink)}
.axh-feat .axh-feat-meta{display:block; font-size:11.5px; font-weight:300; color:var(--f-muted); line-height:1.4}
.axh-feat .axh-feat-ell{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.axh-feat .axh-feat-grow{flex:1; min-width:0; display:block}
.axh-feat .axh-feat-grow > .axh-feat-name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.axh-feat .axh-feat-row{display:flex; align-items:center; gap:10px}
.axh-feat .axh-feat-av{flex:none; width:34px; height:34px; border-radius:50%; object-fit:cover; object-position:50% 30%; background:var(--f-soft)}
.axh-feat .axh-feat-av-i{display:inline-grid; place-items:center; font-size:11px; font-weight:500; background:#F0F0F1; border:1px solid var(--f-line)}
.axh-feat .axh-feat-tile{flex:none; display:inline-grid; place-items:center; width:34px; height:34px; border-radius:11px; background:var(--f-soft); color:var(--f-ink)}
.axh-feat .axh-feat-tile-ink{background:var(--f-black); color:#FFFFFF}
.axh-feat .axh-feat-badge{display:inline-flex; align-items:center; white-space:nowrap; height:22px; padding:0 9px; border-radius:999px; font-size:11px; font-weight:500; border:1px solid transparent}
.axh-feat .axh-feat-badge-gray{background:var(--f-gray-bg); color:var(--f-gray); border-color:var(--f-line)}
.axh-feat .axh-feat-badge-green{background:var(--f-green-bg); color:var(--f-green); border-color:var(--f-green-line)}
.axh-feat .axh-feat-badge-orange{background:var(--f-orange-bg); color:var(--f-orange); border-color:var(--f-orange-line)}
.axh-feat .axh-feat-pill{display:inline-grid; align-items:center; height:30px; padding:0 12px; border-radius:999px; border:1px solid var(--f-line); background:#FFFFFF; font-size:12px; white-space:nowrap; transition:background .35s var(--f-ease), color .35s var(--f-ease), border-color .35s}
.axh-feat .axh-feat-bar{display:block; height:5px; border-radius:5px; background:var(--f-soft); overflow:hidden}
.axh-feat .axh-feat-bar i{display:block; height:100%; border-radius:5px; background:var(--f-ink); transition:width .7s var(--f-ease)}
.axh-feat .axh-feat-stack{display:inline-grid; justify-items:end}
.axh-feat .axh-feat-stack > *{grid-area:1/1; opacity:0; transform:translateY(3px); transition:opacity .35s var(--f-ease), transform .35s var(--f-ease)}
.axh-feat .axh-feat-stack > :first-child{opacity:1; transform:none}
.axh-feat .axh-feat-in{opacity:0; transform:translateY(10px); transition:opacity .5s var(--f-ease), transform .55s var(--f-ease)}

/* Toast (outside the fading mask) */
.axh-feat .axh-feat-toast{position:absolute; left:50%; bottom:18px; z-index:4; display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px 0 12px; border-radius:999px;
  background:var(--f-black); color:#FFFFFF; font-size:12.5px; font-weight:500; white-space:nowrap;
  opacity:0; transform:translate(-50%,8px); transition:opacity .4s var(--f-ease), transform .45s var(--f-ease)}
.axh-feat .axh-feat-toast .axh-feat-ic{stroke:var(--f-accent); stroke-width:2.4; width:15px; height:15px}

/* Brand cursor */
.axh-feat .axh-feat-cursor{position:absolute; z-index:5; left:0; top:0; pointer-events:none; opacity:0; transition:transform .9s cubic-bezier(.45,.05,.2,1), opacity .3s}
.axh-feat .axh-feat-cursor.is-on{opacity:1}
.axh-feat .axh-feat-cursor.is-jump{transition:none}
.axh-feat .axh-feat-cursor svg{display:block; width:20px; height:20px; fill:var(--f-black); stroke:#FFFFFF; stroke-width:1.4; stroke-linejoin:round; transition:transform .15s}
.axh-feat .axh-feat-cursor.is-press svg{transform:scale(.8)}
.axh-feat .axh-feat-cursor.is-flip span{left:auto; right:8px; top:19px}
.axh-feat .axh-feat-cursor span{position:absolute; left:15px; top:17px; padding:2px 8px; border-radius:999px; background:var(--f-accent); color:var(--f-black); font-size:11px; font-weight:600; white-space:nowrap; box-shadow:0 2px 6px rgba(0,0,0,.18)}

/* Caption */
.axh-feat .axh-feat-cap{display:block; padding:18px 14px 12px}
.axh-feat .axh-feat-cap-t{display:flex; align-items:center; gap:10px; font-size:16px; font-weight:500; line-height:1.3; color:var(--f-black)}
.axh-feat .axh-feat-cap-ic{display:inline-grid; place-items:center; flex:none; width:28px; height:28px; border-radius:50%; border:1px solid var(--f-line)}
.axh-feat .axh-feat-cap-ic .axh-feat-ic{width:14px; height:14px}
.axh-feat .axh-feat-cap-p{margin-top:8px; font-size:14px; font-weight:300; color:var(--f-muted); max-width:44ch}
.axh-feat[data-caption="off"]{padding:0; border:0; background:none}
.axh-feat[data-caption="off"] .axh-feat-panel{border-radius:24px}
.axh-feat[data-caption="off"] .axh-feat-cap{display:none}

/* No-JS: show final layout */
.axh-feat:not(.axh-feat-ready) .axh-feat-in{opacity:1; transform:none}
/* Reduced motion */
.axh-feat.axh-feat-reduced *,.axh-feat.axh-feat-reduced *::before,.axh-feat.axh-feat-reduced *::after{transition:none !important; animation:none !important}

@container axhfeat (max-width: 380px){
  .axh-feat .axh-feat-panel{height:300px}
  .axh-feat .axh-feat-ui{top:20px; width:calc(100% - 28px); padding:14px}
  .axh-feat .axh-feat-cap{padding:16px 10px 10px}
}
.axh-feat.axh-feat-match .axh-feat-ui{padding:18px}
.axh-feat.axh-feat-match .axh-feat-m-head{color:var(--f-muted)}
.axh-feat.axh-feat-match .axh-feat-m-brand{margin-top:16px; gap:12px}
.axh-feat.axh-feat-match .axh-feat-m-logo{flex:none; display:inline-grid; place-items:center; width:46px; height:46px; border-radius:13px; background:var(--f-black); color:#FFFFFF; font-size:18px; font-weight:600}
.axh-feat.axh-feat-match .axh-feat-m-name{display:block; font-size:16px; font-weight:500; line-height:1.3}
.axh-feat.axh-feat-match .axh-feat-m-score{flex:none; display:inline-flex; align-items:center; height:26px; padding:0 10px; border-radius:999px; background:var(--f-soft); color:var(--f-muted); font-size:11.5px; font-weight:600; font-variant-numeric:tabular-nums; transition:background .4s, color .4s, border-color .4s; border:1px solid var(--f-line)}
.axh-feat.axh-feat-match .axh-feat-m-fit{margin-top:16px}
.axh-feat.axh-feat-match .axh-feat-m-fit .axh-feat-meta{margin-bottom:7px}
.axh-feat.axh-feat-match .axh-feat-m-fill{width:0; background:#6B6B6F}
.axh-feat.axh-feat-match .axh-feat-m-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px}
.axh-feat.axh-feat-match .axh-feat-m-chip{display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 11px 0 9px; border-radius:999px; border:1px dashed #F0F0F1; color:var(--f-muted); font-size:11.5px; transition:border-color .35s, color .35s, background .35s}
.axh-feat.axh-feat-match .axh-feat-m-chip .axh-feat-ic{width:13px; height:13px; stroke-width:2; opacity:0; margin-left:-13px; transition:opacity .3s, margin .35s var(--f-ease)}
.axh-feat.axh-feat-match .axh-feat-m-cta{display:grid; margin-top:18px}
.axh-feat.axh-feat-match .axh-feat-m-btn{grid-area:1/1; display:flex; align-items:center; justify-content:center; gap:8px; height:44px; border-radius:999px; font-size:13px; font-weight:500; transition:opacity .35s var(--f-ease), transform .35s var(--f-ease)}
.axh-feat.axh-feat-match .axh-feat-m-off{background:var(--f-soft); color:#9B9BA0; border:1px solid var(--f-line)}
.axh-feat.axh-feat-match .axh-feat-m-off .axh-feat-ic{width:14px; height:14px}
.axh-feat.axh-feat-match .axh-feat-m-on{background:var(--f-black); color:#FFFFFF; opacity:0}
.axh-feat.axh-feat-match .axh-feat-m-on .axh-feat-ic{width:14px; height:14px}
.axh-feat.axh-feat-match .axh-feat-m-sent{background:var(--f-green-bg); color:var(--f-green); border:1px solid var(--f-green-line); opacity:0; transform:translateY(4px)}
.axh-feat.axh-feat-match .axh-feat-m-sent .axh-feat-ic{width:15px; height:15px; stroke-width:2}
/* phases */
.axh-feat.axh-feat-match.axh-feat-p2 .axh-feat-m-c1,.axh-feat.axh-feat-match.axh-feat-p3 .axh-feat-m-c2,.axh-feat.axh-feat-match.axh-feat-p4 .axh-feat-m-c3{border-style:solid; border-color:var(--f-green-line); background:var(--f-green-bg); color:var(--f-green)}
.axh-feat.axh-feat-match.axh-feat-p2 .axh-feat-m-c1 .axh-feat-ic,.axh-feat.axh-feat-match.axh-feat-p3 .axh-feat-m-c2 .axh-feat-ic,.axh-feat.axh-feat-match.axh-feat-p4 .axh-feat-m-c3 .axh-feat-ic{opacity:1; margin-left:0}
.axh-feat.axh-feat-match.axh-feat-p2 .axh-feat-m-fill{width:31%}
.axh-feat.axh-feat-match.axh-feat-p3 .axh-feat-m-fill{width:62%}
.axh-feat.axh-feat-match.axh-feat-p4 .axh-feat-m-fill{width:100%}
.axh-feat.axh-feat-match.axh-feat-p4 .axh-feat-m-score{background:var(--f-green-bg); color:var(--f-green); border-color:var(--f-green-line)}
.axh-feat.axh-feat-match.axh-feat-p5 .axh-feat-m-off{opacity:0}
.axh-feat.axh-feat-match.axh-feat-p5 .axh-feat-m-on{opacity:1}
.axh-feat.axh-feat-match.axh-feat-p6 .axh-feat-m-on{opacity:0; transform:translateY(-4px)}
.axh-feat.axh-feat-match.axh-feat-p6 .axh-feat-m-sent{opacity:1; transform:none}
.axh-feat.axh-feat-match:not(.axh-feat-ready) .axh-feat-m-fill{width:100%}
.axh-feat.axh-feat-match:not(.axh-feat-ready) .axh-feat-m-off{opacity:0}
.axh-feat.axh-feat-match:not(.axh-feat-ready) .axh-feat-m-on{opacity:1}
.axh-feat.axh-feat-match:not(.axh-feat-ready) .axh-feat-m-chip{border-style:solid}
.axh-feat.axh-feat-match .axh-feat-panel{height:clamp(330px,78cqw,390px)}
.axh-feat.axh-feat-match .axh-feat-wrap{-webkit-mask-image:none; mask-image:none}
@container axhfeat (max-width: 420px){
  .axh-feat.axh-feat-match .axh-feat-panel{height:350px}
  .axh-feat.axh-feat-match .axh-feat-m-chip{padding:0 9px 0 8px; font-size:11px}
  .axh-feat.axh-feat-match .axh-feat-m-brand{margin-top:14px}
  .axh-feat.axh-feat-match .axh-feat-m-cta{margin-top:16px}
}


/* ===== athleteXhub feature blocks · shared base (identical in every block) ===== */
.axh-feat{
  --f-bg:#F1F1F2; --f-card:#FFFFFF; --f-line:#F0F0F1; --f-line-2:#F0F0F1; --f-ink:#242426; --f-black:#0B0B0C;
  --f-muted:#6B6B6F; --f-soft:#F1F1F2; --f-accent:#EDFF00;
  --f-green:#444444; --f-green-bg:#F3F3F4; --f-green-line:#F0F0F1;
  --f-orange:#444444; --f-orange-bg:#F7F7F7; --f-orange-line:#F0F0F1;
  --f-gray:#444444; --f-gray-bg:#F3F3F4;
  --f-ease:cubic-bezier(.2,.7,.2,1);
  container:axhfeat / inline-size;
  display:block; position:relative; box-sizing:border-box; width:100%; margin:0; padding:8px;
  background:#FFFFFF; border:1px solid var(--f-line); border-radius:28px;
  font-family:Poppins,"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:14px; font-weight:400; line-height:1.45; color:var(--f-ink); text-align:left; letter-spacing:0;
  -webkit-font-smoothing:antialiased;
}
.axh-feat *, .axh-feat *::before, .axh-feat *::after{box-sizing:border-box}
.axh-feat div,.axh-feat span,.axh-feat p,.axh-feat h3,.axh-feat ul,.axh-feat li,.axh-feat img,
.axh-feat figcaption,.axh-feat strong,.axh-feat i{
  margin:0; padding:0; border:0; background:none; box-shadow:none; text-transform:none; float:none;
  font:inherit; color:inherit; letter-spacing:inherit; line-height:inherit; text-decoration:none; text-shadow:none;
}
.axh-feat ul,.axh-feat li{list-style:none}
.axh-feat li::before,.axh-feat li::marker{content:none}
.axh-feat img{display:block; max-width:none; border-radius:0}
.axh-feat .axh-feat-ic{width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

/* Panel + cropped UI fragment */
.axh-feat .axh-feat-panel{position:relative; height:clamp(280px,66cqw,360px); overflow:hidden; border-radius:21px; background:var(--f-bg)}
.axh-feat .axh-feat-wrap{position:absolute; inset:0;
  -webkit-mask-image:linear-gradient(to bottom,#000000 74%,transparent 97%); mask-image:linear-gradient(to bottom,#000000 74%,transparent 97%);
  transition:opacity .35s ease}
.axh-feat.axh-feat-resetting .axh-feat-wrap,.axh-feat.axh-feat-resetting .axh-feat-toast{opacity:0}
.axh-feat .axh-feat-ui{position:absolute; left:50%; top:28px; width:min(440px,calc(100% - 40px)); transform:translateX(-50%);
  background:var(--f-card); border:1px solid var(--f-line); border-radius:20px; padding:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 16px 36px -18px rgba(0,0,0,.16)}

/* Atoms (mirroring the athleteXhub app) */
.axh-feat .axh-feat-name{display:block; font-size:13.5px; font-weight:500; line-height:1.3; color:var(--f-ink)}
.axh-feat .axh-feat-meta{display:block; font-size:11.5px; font-weight:300; color:var(--f-muted); line-height:1.4}
.axh-feat .axh-feat-ell{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.axh-feat .axh-feat-grow{flex:1; min-width:0; display:block}
.axh-feat .axh-feat-row{display:flex; align-items:center; gap:10px}
.axh-feat .axh-feat-av{flex:none; width:34px; height:34px; border-radius:50%; object-fit:cover; object-position:50% 30%; background:var(--f-soft)}
.axh-feat .axh-feat-av-i{display:inline-grid; place-items:center; font-size:11px; font-weight:500; background:#F0F0F1; border:1px solid var(--f-line)}
.axh-feat .axh-feat-tile{flex:none; display:inline-grid; place-items:center; width:34px; height:34px; border-radius:11px; background:var(--f-soft); color:var(--f-ink)}
.axh-feat .axh-feat-tile-ink{background:var(--f-black); color:#FFFFFF}
.axh-feat .axh-feat-badge{display:inline-flex; align-items:center; white-space:nowrap; height:22px; padding:0 9px; border-radius:999px; font-size:11px; font-weight:500; border:1px solid transparent}
.axh-feat .axh-feat-badge-gray{background:var(--f-gray-bg); color:var(--f-gray); border-color:var(--f-line)}
.axh-feat .axh-feat-badge-green{background:var(--f-green-bg); color:var(--f-green); border-color:var(--f-green-line)}
.axh-feat .axh-feat-badge-orange{background:var(--f-orange-bg); color:var(--f-orange); border-color:var(--f-orange-line)}
.axh-feat .axh-feat-pill{display:inline-grid; align-items:center; height:30px; padding:0 12px; border-radius:999px; border:1px solid var(--f-line); background:#FFFFFF; font-size:12px; white-space:nowrap; transition:background .35s var(--f-ease), color .35s var(--f-ease), border-color .35s}
.axh-feat .axh-feat-bar{display:block; height:5px; border-radius:5px; background:var(--f-soft); overflow:hidden}
.axh-feat .axh-feat-bar i{display:block; height:100%; border-radius:5px; background:var(--f-ink); transition:width .7s var(--f-ease)}
.axh-feat .axh-feat-stack{display:inline-grid; justify-items:end}
.axh-feat .axh-feat-stack > *{grid-area:1/1; opacity:0; transform:translateY(3px); transition:opacity .35s var(--f-ease), transform .35s var(--f-ease)}
.axh-feat .axh-feat-stack > :first-child{opacity:1; transform:none}
.axh-feat .axh-feat-in{opacity:0; transform:translateY(10px); transition:opacity .5s var(--f-ease), transform .55s var(--f-ease)}

/* Toast (outside the fading mask) */
.axh-feat .axh-feat-toast{position:absolute; left:50%; bottom:18px; z-index:4; display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px 0 12px; border-radius:999px;
  background:var(--f-black); color:#FFFFFF; font-size:12.5px; font-weight:500; white-space:nowrap;
  opacity:0; transform:translate(-50%,8px); transition:opacity .4s var(--f-ease), transform .45s var(--f-ease)}
.axh-feat .axh-feat-toast .axh-feat-ic{stroke:var(--f-accent); stroke-width:2.4; width:15px; height:15px}

/* Brand cursor */
.axh-feat .axh-feat-cursor{position:absolute; z-index:5; left:0; top:0; pointer-events:none; opacity:0; transition:transform .9s cubic-bezier(.45,.05,.2,1), opacity .3s}
.axh-feat .axh-feat-cursor.is-on{opacity:1}
.axh-feat .axh-feat-cursor.is-jump{transition:none}
.axh-feat .axh-feat-cursor svg{display:block; width:20px; height:20px; fill:var(--f-black); stroke:#FFFFFF; stroke-width:1.4; stroke-linejoin:round; transition:transform .15s}
.axh-feat .axh-feat-cursor.is-press svg{transform:scale(.8)}
.axh-feat .axh-feat-cursor.is-flip span{left:auto; right:8px; top:19px}
.axh-feat .axh-feat-cursor span{position:absolute; left:15px; top:17px; padding:2px 8px; border-radius:999px; background:var(--f-accent); color:var(--f-black); font-size:11px; font-weight:600; white-space:nowrap; box-shadow:0 2px 6px rgba(0,0,0,.18)}

/* Caption */
.axh-feat .axh-feat-cap{display:block; padding:18px 14px 12px}
.axh-feat .axh-feat-cap-t{display:flex; align-items:center; gap:10px; font-size:16px; font-weight:500; line-height:1.3; color:var(--f-black)}
.axh-feat .axh-feat-cap-ic{display:inline-grid; place-items:center; flex:none; width:28px; height:28px; border-radius:50%; border:1px solid var(--f-line)}
.axh-feat .axh-feat-cap-ic .axh-feat-ic{width:14px; height:14px}
.axh-feat .axh-feat-cap-p{margin-top:8px; font-size:14px; font-weight:300; color:var(--f-muted); max-width:44ch}
.axh-feat[data-caption="off"]{padding:0; border:0; background:none}
.axh-feat[data-caption="off"] .axh-feat-panel{border-radius:24px}
.axh-feat[data-caption="off"] .axh-feat-cap{display:none}

/* No-JS: show final layout */
.axh-feat:not(.axh-feat-ready) .axh-feat-in{opacity:1; transform:none}
/* Reduced motion */
.axh-feat.axh-feat-reduced *,.axh-feat.axh-feat-reduced *::before,.axh-feat.axh-feat-reduced *::after{transition:none !important; animation:none !important}

@container axhfeat (max-width: 380px){
  .axh-feat .axh-feat-panel{height:300px}
  .axh-feat .axh-feat-ui{top:20px; width:calc(100% - 28px); padding:14px}
  .axh-feat .axh-feat-cap{padding:16px 10px 10px}
}
.axh-feat-discover .axh-feat-d-search{display:flex; align-items:center; gap:10px; height:38px; padding:0 14px; border:1px solid var(--f-line); border-radius:12px; font-size:12.5px; font-weight:300; color:var(--f-muted)}
.axh-feat-discover .axh-feat-d-filters{display:flex; gap:6px; margin:10px 0 0; overflow:hidden}
.axh-feat-discover .axh-feat-d-f1 > span{grid-area:1/1; display:inline-flex; align-items:center; gap:5px; transition:opacity .3s var(--f-ease)}
.axh-feat-discover .axh-feat-d-f1 .axh-feat-ic{width:13px; height:13px; stroke:var(--f-accent); stroke-width:2.4}
.axh-feat-discover .axh-feat-d-f1b{opacity:0}
.axh-feat-discover .axh-feat-d-count{margin:12px 0 2px}
.axh-feat-discover .axh-feat-d-count span:first-child{font-weight:500; color:var(--f-ink)}
.axh-feat-discover .axh-feat-d-row{display:flex; align-items:center; gap:10px; height:60px; border-top:1px solid var(--f-line-2)}
.axh-feat-discover .axh-feat-d-row:first-child{border-top:0}
.axh-feat-discover .axh-feat-d-row:nth-child(2){transition-delay:.12s}
.axh-feat-discover .axh-feat-d-row:nth-child(3){transition-delay:.24s}
.axh-feat-discover .axh-feat-d-match{flex:none; width:118px; display:block}
.axh-feat-discover .axh-feat-d-match .axh-feat-meta{font-size:10.5px}
.axh-feat-discover .axh-feat-d-mv{display:flex; align-items:center; gap:7px}
.axh-feat-discover .axh-feat-d-mv .axh-feat-bar{flex:1; height:4px}
.axh-feat-discover .axh-feat-d-mv strong{font-size:11.5px; font-weight:600}
.axh-feat-discover .axh-feat-d-star{flex:none; display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%}
.axh-feat-discover .axh-feat-d-star svg{width:18px; height:18px; fill:transparent; stroke:var(--f-ink); stroke-width:1.5; stroke-linejoin:round; transition:fill .3s var(--f-ease), stroke .3s, transform .3s var(--f-ease)}
.axh-feat-discover .axh-feat-d-star.is-off svg{stroke:#A1A1A6}
/* phases */
.axh-feat-discover.axh-feat-p1 .axh-feat-d-f1{background:var(--f-black); border-color:var(--f-black); color:#FFFFFF}
.axh-feat-discover.axh-feat-p1 .axh-feat-d-f1a{opacity:0}
.axh-feat-discover.axh-feat-p1 .axh-feat-d-f1b{opacity:1}
.axh-feat-discover.axh-feat-p2 .axh-feat-in{opacity:1; transform:none}
.axh-feat-discover.axh-feat-p3 [data-target="star"] svg{fill:#6B6B6F; stroke:#6B6B6F; transform:scale(1.08)}
.axh-feat-discover.axh-feat-p3 .axh-feat-toast{opacity:1; transform:translate(-50%,0)}
.axh-feat-discover:not(.axh-feat-ready) .axh-feat-d-f1{background:var(--f-black); color:#FFFFFF}
.axh-feat-discover:not(.axh-feat-ready) .axh-feat-d-f1a{opacity:0}
.axh-feat-discover:not(.axh-feat-ready) .axh-feat-d-f1b{opacity:1}
@container axhfeat (max-width: 420px){
  .axh-feat-discover .axh-feat-d-match{width:64px}
  .axh-feat-discover .axh-feat-d-match .axh-feat-meta{display:none}
  .axh-feat-discover .axh-feat-d-mv .axh-feat-bar{display:none}
  .axh-feat-discover .axh-feat-d-mv{justify-content:flex-end}
  .axh-feat-discover .axh-feat-d-f3{display:none}
}


/* ===== athleteXhub feature blocks · shared base (identical in every block) ===== */
.axh-feat{
  --f-bg:#F1F1F2; --f-card:#FFFFFF; --f-line:#F0F0F1; --f-line-2:#F0F0F1; --f-ink:#242426; --f-black:#0B0B0C;
  --f-muted:#6B6B6F; --f-soft:#F1F1F2; --f-accent:#EDFF00;
  --f-green:#444444; --f-green-bg:#F3F3F4; --f-green-line:#F0F0F1;
  --f-orange:#444444; --f-orange-bg:#F7F7F7; --f-orange-line:#F0F0F1;
  --f-gray:#444444; --f-gray-bg:#F3F3F4;
  --f-ease:cubic-bezier(.2,.7,.2,1);
  container:axhfeat / inline-size;
  display:block; position:relative; box-sizing:border-box; width:100%; margin:0; padding:8px;
  background:#FFFFFF; border:1px solid var(--f-line); border-radius:28px;
  font-family:Poppins,"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:14px; font-weight:400; line-height:1.45; color:var(--f-ink); text-align:left; letter-spacing:0;
  -webkit-font-smoothing:antialiased;
}
.axh-feat *, .axh-feat *::before, .axh-feat *::after{box-sizing:border-box}
.axh-feat div,.axh-feat span,.axh-feat p,.axh-feat h3,.axh-feat ul,.axh-feat li,.axh-feat img,
.axh-feat figcaption,.axh-feat strong,.axh-feat i{
  margin:0; padding:0; border:0; background:none; box-shadow:none; text-transform:none; float:none;
  font:inherit; color:inherit; letter-spacing:inherit; line-height:inherit; text-decoration:none; text-shadow:none;
}
.axh-feat ul,.axh-feat li{list-style:none}
.axh-feat li::before,.axh-feat li::marker{content:none}
.axh-feat img{display:block; max-width:none; border-radius:0}
.axh-feat .axh-feat-ic{width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

/* Panel + cropped UI fragment */
.axh-feat .axh-feat-panel{position:relative; height:clamp(280px,66cqw,360px); overflow:hidden; border-radius:21px; background:var(--f-bg)}
.axh-feat .axh-feat-wrap{position:absolute; inset:0;
  -webkit-mask-image:linear-gradient(to bottom,#000000 74%,transparent 97%); mask-image:linear-gradient(to bottom,#000000 74%,transparent 97%);
  transition:opacity .35s ease}
.axh-feat.axh-feat-resetting .axh-feat-wrap,.axh-feat.axh-feat-resetting .axh-feat-toast{opacity:0}
.axh-feat .axh-feat-ui{position:absolute; left:50%; top:28px; width:min(440px,calc(100% - 40px)); transform:translateX(-50%);
  background:var(--f-card); border:1px solid var(--f-line); border-radius:20px; padding:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 16px 36px -18px rgba(0,0,0,.16)}

/* Atoms (mirroring the athleteXhub app) */
.axh-feat .axh-feat-name{display:block; font-size:13.5px; font-weight:500; line-height:1.3; color:var(--f-ink)}
.axh-feat .axh-feat-meta{display:block; font-size:11.5px; font-weight:300; color:var(--f-muted); line-height:1.4}
.axh-feat .axh-feat-ell{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.axh-feat .axh-feat-grow{flex:1; min-width:0; display:block}
.axh-feat .axh-feat-row{display:flex; align-items:center; gap:10px}
.axh-feat .axh-feat-av{flex:none; width:34px; height:34px; border-radius:50%; object-fit:cover; object-position:50% 30%; background:var(--f-soft)}
.axh-feat .axh-feat-av-i{display:inline-grid; place-items:center; font-size:11px; font-weight:500; background:#F0F0F1; border:1px solid var(--f-line)}
.axh-feat .axh-feat-tile{flex:none; display:inline-grid; place-items:center; width:34px; height:34px; border-radius:11px; background:var(--f-soft); color:var(--f-ink)}
.axh-feat .axh-feat-tile-ink{background:var(--f-black); color:#FFFFFF}
.axh-feat .axh-feat-badge{display:inline-flex; align-items:center; white-space:nowrap; height:22px; padding:0 9px; border-radius:999px; font-size:11px; font-weight:500; border:1px solid transparent}
.axh-feat .axh-feat-badge-gray{background:var(--f-gray-bg); color:var(--f-gray); border-color:var(--f-line)}
.axh-feat .axh-feat-badge-green{background:var(--f-green-bg); color:var(--f-green); border-color:var(--f-green-line)}
.axh-feat .axh-feat-badge-orange{background:var(--f-orange-bg); color:var(--f-orange); border-color:var(--f-orange-line)}
.axh-feat .axh-feat-pill{display:inline-grid; align-items:center; height:30px; padding:0 12px; border-radius:999px; border:1px solid var(--f-line); background:#FFFFFF; font-size:12px; white-space:nowrap; transition:background .35s var(--f-ease), color .35s var(--f-ease), border-color .35s}
.axh-feat .axh-feat-bar{display:block; height:5px; border-radius:5px; background:var(--f-soft); overflow:hidden}
.axh-feat .axh-feat-bar i{display:block; height:100%; border-radius:5px; background:var(--f-ink); transition:width .7s var(--f-ease)}
.axh-feat .axh-feat-stack{display:inline-grid; justify-items:end}
.axh-feat .axh-feat-stack > *{grid-area:1/1; opacity:0; transform:translateY(3px); transition:opacity .35s var(--f-ease), transform .35s var(--f-ease)}
.axh-feat .axh-feat-stack > :first-child{opacity:1; transform:none}
.axh-feat .axh-feat-in{opacity:0; transform:translateY(10px); transition:opacity .5s var(--f-ease), transform .55s var(--f-ease)}

/* Toast (outside the fading mask) */
.axh-feat .axh-feat-toast{position:absolute; left:50%; bottom:18px; z-index:4; display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px 0 12px; border-radius:999px;
  background:var(--f-black); color:#FFFFFF; font-size:12.5px; font-weight:500; white-space:nowrap;
  opacity:0; transform:translate(-50%,8px); transition:opacity .4s var(--f-ease), transform .45s var(--f-ease)}
.axh-feat .axh-feat-toast .axh-feat-ic{stroke:var(--f-accent); stroke-width:2.4; width:15px; height:15px}

/* Brand cursor */
.axh-feat .axh-feat-cursor{position:absolute; z-index:5; left:0; top:0; pointer-events:none; opacity:0; transition:transform .9s cubic-bezier(.45,.05,.2,1), opacity .3s}
.axh-feat .axh-feat-cursor.is-on{opacity:1}
.axh-feat .axh-feat-cursor.is-jump{transition:none}
.axh-feat .axh-feat-cursor svg{display:block; width:20px; height:20px; fill:var(--f-black); stroke:#FFFFFF; stroke-width:1.4; stroke-linejoin:round; transition:transform .15s}
.axh-feat .axh-feat-cursor.is-press svg{transform:scale(.8)}
.axh-feat .axh-feat-cursor.is-flip span{left:auto; right:8px; top:19px}
.axh-feat .axh-feat-cursor span{position:absolute; left:15px; top:17px; padding:2px 8px; border-radius:999px; background:var(--f-accent); color:var(--f-black); font-size:11px; font-weight:600; white-space:nowrap; box-shadow:0 2px 6px rgba(0,0,0,.18)}

/* Caption */
.axh-feat .axh-feat-cap{display:block; padding:18px 14px 12px}
.axh-feat .axh-feat-cap-t{display:flex; align-items:center; gap:10px; font-size:16px; font-weight:500; line-height:1.3; color:var(--f-black)}
.axh-feat .axh-feat-cap-ic{display:inline-grid; place-items:center; flex:none; width:28px; height:28px; border-radius:50%; border:1px solid var(--f-line)}
.axh-feat .axh-feat-cap-ic .axh-feat-ic{width:14px; height:14px}
.axh-feat .axh-feat-cap-p{margin-top:8px; font-size:14px; font-weight:300; color:var(--f-muted); max-width:44ch}
.axh-feat[data-caption="off"]{padding:0; border:0; background:none}
.axh-feat[data-caption="off"] .axh-feat-panel{border-radius:24px}
.axh-feat[data-caption="off"] .axh-feat-cap{display:none}

/* No-JS: show final layout */
.axh-feat:not(.axh-feat-ready) .axh-feat-in{opacity:1; transform:none}
/* Reduced motion */
.axh-feat.axh-feat-reduced *,.axh-feat.axh-feat-reduced *::before,.axh-feat.axh-feat-reduced *::after{transition:none !important; animation:none !important}

@container axhfeat (max-width: 380px){
  .axh-feat .axh-feat-panel{height:300px}
  .axh-feat .axh-feat-ui{top:20px; width:calc(100% - 28px); padding:14px}
  .axh-feat .axh-feat-cap{padding:16px 10px 10px}
}
.axh-feat-campaigns .axh-feat-c-thumb{flex:none; display:inline-grid; place-items:center; width:44px; height:44px; border-radius:13px; background:var(--f-black); color:#FFFFFF; font-size:16px; font-weight:600}
.axh-feat-campaigns .axh-feat-c-live{width:6px; height:6px; border-radius:50%; background:#6B6B6F; margin-right:6px}
.axh-feat-campaigns .axh-feat-c-spots{margin-top:14px}
.axh-feat-campaigns .axh-feat-c-spots p{margin-bottom:7px}
.axh-feat-campaigns .axh-feat-c-spots strong{font-weight:600; color:var(--f-ink)}
.axh-feat-campaigns .axh-feat-c-fill{width:30%}
.axh-feat-campaigns .axh-feat-c-h{display:flex; align-items:center; justify-content:space-between; margin:16px 0 4px; padding-top:14px; border-top:1px solid var(--f-line-2); font-size:13px; font-weight:500}
.axh-feat-campaigns .axh-feat-c-n{display:inline-grid; min-width:22px; height:22px; padding:0 7px; border-radius:999px; background:var(--f-black); color:#FFFFFF; font-size:11px; font-weight:600; place-items:center; overflow:hidden}
.axh-feat-campaigns .axh-feat-c-n > span{grid-area:1/1; opacity:0; transform:translateY(6px); transition:opacity .3s var(--f-ease), transform .3s var(--f-ease)}
.axh-feat-campaigns .axh-feat-c-n > span:first-child{opacity:1; transform:none}
.axh-feat-campaigns .axh-feat-c-row{display:flex; align-items:center; gap:10px; height:54px; border-top:1px solid var(--f-line-2)}
.axh-feat-campaigns .axh-feat-c-row:first-child{border-top:0}
/* phases */
.axh-feat-campaigns.axh-feat-p2 .axh-feat-c-state > :first-child{opacity:0}
.axh-feat-campaigns.axh-feat-p2 .axh-feat-c-state > :last-child{opacity:1; transform:none}
.axh-feat-campaigns.axh-feat-p3 .axh-feat-c-r1,
.axh-feat-campaigns.axh-feat-p4 .axh-feat-c-r2,
.axh-feat-campaigns.axh-feat-p5 .axh-feat-c-r3{opacity:1; transform:none}
.axh-feat-campaigns.axh-feat-p3 .axh-feat-c-n > :nth-child(1){opacity:0; transform:translateY(-6px)}
.axh-feat-campaigns.axh-feat-p3:not(.axh-feat-p4) .axh-feat-c-n > :nth-child(2){opacity:1; transform:none}
.axh-feat-campaigns.axh-feat-p4:not(.axh-feat-p5) .axh-feat-c-n > :nth-child(3){opacity:1; transform:none}
.axh-feat-campaigns.axh-feat-p5 .axh-feat-c-n > :nth-child(4){opacity:1; transform:none}
.axh-feat-campaigns.axh-feat-p6 [data-target="accept"] > :first-child{opacity:0}
.axh-feat-campaigns.axh-feat-p6 [data-target="accept"] > :last-child{opacity:1; transform:none}
.axh-feat-campaigns.axh-feat-p6 .axh-feat-c-fill{width:40%}
.axh-feat-campaigns:not(.axh-feat-ready) .axh-feat-c-n > :first-child{opacity:0}
.axh-feat-campaigns:not(.axh-feat-ready) .axh-feat-c-n > :last-child{opacity:1; transform:none}


/* ===== athleteXhub feature blocks · shared base (identical in every block) ===== */
.axh-feat{
  --f-bg:#F1F1F2; --f-card:#FFFFFF; --f-line:#F0F0F1; --f-line-2:#F0F0F1; --f-ink:#242426; --f-black:#0B0B0C;
  --f-muted:#6B6B6F; --f-soft:#F1F1F2; --f-accent:#EDFF00;
  --f-green:#444444; --f-green-bg:#F3F3F4; --f-green-line:#F0F0F1;
  --f-orange:#444444; --f-orange-bg:#F7F7F7; --f-orange-line:#F0F0F1;
  --f-gray:#444444; --f-gray-bg:#F3F3F4;
  --f-ease:cubic-bezier(.2,.7,.2,1);
  container:axhfeat / inline-size;
  display:block; position:relative; box-sizing:border-box; width:100%; margin:0; padding:8px;
  background:#FFFFFF; border:1px solid var(--f-line); border-radius:28px;
  font-family:Poppins,"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:14px; font-weight:400; line-height:1.45; color:var(--f-ink); text-align:left; letter-spacing:0;
  -webkit-font-smoothing:antialiased;
}
.axh-feat *, .axh-feat *::before, .axh-feat *::after{box-sizing:border-box}
.axh-feat div,.axh-feat span,.axh-feat p,.axh-feat h3,.axh-feat ul,.axh-feat li,.axh-feat img,
.axh-feat figcaption,.axh-feat strong,.axh-feat i{
  margin:0; padding:0; border:0; background:none; box-shadow:none; text-transform:none; float:none;
  font:inherit; color:inherit; letter-spacing:inherit; line-height:inherit; text-decoration:none; text-shadow:none;
}
.axh-feat ul,.axh-feat li{list-style:none}
.axh-feat li::before,.axh-feat li::marker{content:none}
.axh-feat img{display:block; max-width:none; border-radius:0}
.axh-feat .axh-feat-ic{width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

/* Panel + cropped UI fragment */
.axh-feat .axh-feat-panel{position:relative; height:clamp(280px,66cqw,360px); overflow:hidden; border-radius:21px; background:var(--f-bg)}
.axh-feat .axh-feat-wrap{position:absolute; inset:0;
  -webkit-mask-image:linear-gradient(to bottom,#000000 74%,transparent 97%); mask-image:linear-gradient(to bottom,#000000 74%,transparent 97%);
  transition:opacity .35s ease}
.axh-feat.axh-feat-resetting .axh-feat-wrap,.axh-feat.axh-feat-resetting .axh-feat-toast{opacity:0}
.axh-feat .axh-feat-ui{position:absolute; left:50%; top:28px; width:min(440px,calc(100% - 40px)); transform:translateX(-50%);
  background:var(--f-card); border:1px solid var(--f-line); border-radius:20px; padding:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 16px 36px -18px rgba(0,0,0,.16)}

/* Atoms (mirroring the athleteXhub app) */
.axh-feat .axh-feat-name{display:block; font-size:13.5px; font-weight:500; line-height:1.3; color:var(--f-ink)}
.axh-feat .axh-feat-meta{display:block; font-size:11.5px; font-weight:300; color:var(--f-muted); line-height:1.4}
.axh-feat .axh-feat-ell{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.axh-feat .axh-feat-grow{flex:1; min-width:0; display:block}
.axh-feat .axh-feat-row{display:flex; align-items:center; gap:10px}
.axh-feat .axh-feat-av{flex:none; width:34px; height:34px; border-radius:50%; object-fit:cover; object-position:50% 30%; background:var(--f-soft)}
.axh-feat .axh-feat-av-i{display:inline-grid; place-items:center; font-size:11px; font-weight:500; background:#F0F0F1; border:1px solid var(--f-line)}
.axh-feat .axh-feat-tile{flex:none; display:inline-grid; place-items:center; width:34px; height:34px; border-radius:11px; background:var(--f-soft); color:var(--f-ink)}
.axh-feat .axh-feat-tile-ink{background:var(--f-black); color:#FFFFFF}
.axh-feat .axh-feat-badge{display:inline-flex; align-items:center; white-space:nowrap; height:22px; padding:0 9px; border-radius:999px; font-size:11px; font-weight:500; border:1px solid transparent}
.axh-feat .axh-feat-badge-gray{background:var(--f-gray-bg); color:var(--f-gray); border-color:var(--f-line)}
.axh-feat .axh-feat-badge-green{background:var(--f-green-bg); color:var(--f-green); border-color:var(--f-green-line)}
.axh-feat .axh-feat-badge-orange{background:var(--f-orange-bg); color:var(--f-orange); border-color:var(--f-orange-line)}
.axh-feat .axh-feat-pill{display:inline-grid; align-items:center; height:30px; padding:0 12px; border-radius:999px; border:1px solid var(--f-line); background:#FFFFFF; font-size:12px; white-space:nowrap; transition:background .35s var(--f-ease), color .35s var(--f-ease), border-color .35s}
.axh-feat .axh-feat-bar{display:block; height:5px; border-radius:5px; background:var(--f-soft); overflow:hidden}
.axh-feat .axh-feat-bar i{display:block; height:100%; border-radius:5px; background:var(--f-ink); transition:width .7s var(--f-ease)}
.axh-feat .axh-feat-stack{display:inline-grid; justify-items:end}
.axh-feat .axh-feat-stack > *{grid-area:1/1; opacity:0; transform:translateY(3px); transition:opacity .35s var(--f-ease), transform .35s var(--f-ease)}
.axh-feat .axh-feat-stack > :first-child{opacity:1; transform:none}
.axh-feat .axh-feat-in{opacity:0; transform:translateY(10px); transition:opacity .5s var(--f-ease), transform .55s var(--f-ease)}

/* Toast (outside the fading mask) */
.axh-feat .axh-feat-toast{position:absolute; left:50%; bottom:18px; z-index:4; display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px 0 12px; border-radius:999px;
  background:var(--f-black); color:#FFFFFF; font-size:12.5px; font-weight:500; white-space:nowrap;
  opacity:0; transform:translate(-50%,8px); transition:opacity .4s var(--f-ease), transform .45s var(--f-ease)}
.axh-feat .axh-feat-toast .axh-feat-ic{stroke:var(--f-accent); stroke-width:2.4; width:15px; height:15px}

/* Brand cursor */
.axh-feat .axh-feat-cursor{position:absolute; z-index:5; left:0; top:0; pointer-events:none; opacity:0; transition:transform .9s cubic-bezier(.45,.05,.2,1), opacity .3s}
.axh-feat .axh-feat-cursor.is-on{opacity:1}
.axh-feat .axh-feat-cursor.is-jump{transition:none}
.axh-feat .axh-feat-cursor svg{display:block; width:20px; height:20px; fill:var(--f-black); stroke:#FFFFFF; stroke-width:1.4; stroke-linejoin:round; transition:transform .15s}
.axh-feat .axh-feat-cursor.is-press svg{transform:scale(.8)}
.axh-feat .axh-feat-cursor.is-flip span{left:auto; right:8px; top:19px}
.axh-feat .axh-feat-cursor span{position:absolute; left:15px; top:17px; padding:2px 8px; border-radius:999px; background:var(--f-accent); color:var(--f-black); font-size:11px; font-weight:600; white-space:nowrap; box-shadow:0 2px 6px rgba(0,0,0,.18)}

/* Caption */
.axh-feat .axh-feat-cap{display:block; padding:18px 14px 12px}
.axh-feat .axh-feat-cap-t{display:flex; align-items:center; gap:10px; font-size:16px; font-weight:500; line-height:1.3; color:var(--f-black)}
.axh-feat .axh-feat-cap-ic{display:inline-grid; place-items:center; flex:none; width:28px; height:28px; border-radius:50%; border:1px solid var(--f-line)}
.axh-feat .axh-feat-cap-ic .axh-feat-ic{width:14px; height:14px}
.axh-feat .axh-feat-cap-p{margin-top:8px; font-size:14px; font-weight:300; color:var(--f-muted); max-width:44ch}
.axh-feat[data-caption="off"]{padding:0; border:0; background:none}
.axh-feat[data-caption="off"] .axh-feat-panel{border-radius:24px}
.axh-feat[data-caption="off"] .axh-feat-cap{display:none}

/* No-JS: show final layout */
.axh-feat:not(.axh-feat-ready) .axh-feat-in{opacity:1; transform:none}
/* Reduced motion */
.axh-feat.axh-feat-reduced *,.axh-feat.axh-feat-reduced *::before,.axh-feat.axh-feat-reduced *::after{transition:none !important; animation:none !important}

@container axhfeat (max-width: 380px){
  .axh-feat .axh-feat-panel{height:300px}
  .axh-feat .axh-feat-ui{top:20px; width:calc(100% - 28px); padding:14px}
  .axh-feat .axh-feat-cap{padding:16px 10px 10px}
}
.axh-feat-ams .axh-feat-a-file{display:flex; align-items:center; gap:9px; margin-top:14px; padding:9px 12px; border-radius:12px; background:var(--f-soft); border:1px dashed #F0F0F1; font-size:12px; font-weight:500}
.axh-feat-ams .axh-feat-a-file .axh-feat-ell{flex:1; min-width:0}
.axh-feat-ams .axh-feat-a-file .axh-feat-ic{width:15px; height:15px}
.axh-feat-ams .axh-feat-a-read{display:flex; align-items:center; gap:12px; margin-top:14px; padding-top:14px; border-top:1px solid var(--f-line-2)}
.axh-feat-ams .axh-feat-a-avs{display:flex; flex:none}
.axh-feat-ams .axh-feat-a-avs .axh-feat-av{width:28px; height:28px; margin-left:-7px; border:2px solid #FFFFFF; font-size:9.5px; opacity:0; transform:scale(.7); transition:opacity .35s var(--f-ease), transform .4s var(--f-ease)}
.axh-feat-ams .axh-feat-a-avs .axh-feat-av:first-child{margin-left:0}
.axh-feat-ams .axh-feat-a-cnt .axh-feat-meta{margin-bottom:6px}
.axh-feat-ams .axh-feat-a-cnt strong{font-weight:600; color:var(--f-ink)}
.axh-feat-ams .axh-feat-a-fill{width:0}
.axh-feat-ams .axh-feat-a-hl{top:auto; bottom:44px; padding:12px 14px; transition-duration:.55s,.6s}
.axh-feat-ams .axh-feat-a-thumbs{display:flex; gap:4px; flex:none}
.axh-feat-ams .axh-feat-a-thumbs img{width:30px; height:30px; border-radius:8px; object-fit:cover; background:var(--f-soft)}
.axh-feat-ams .axh-feat-panel{height:clamp(300px,68cqw,370px)}
@container axhfeat (max-width: 420px){ .axh-feat-ams .axh-feat-a-thumbs img:nth-child(n+2){display:none} }
.axh-feat-ams .axh-feat-wrap{-webkit-mask-image:none; mask-image:none}
/* phases */
.axh-feat-ams.axh-feat-p1 .axh-feat-a-card{opacity:1; transform:translateX(-50%)}
.axh-feat-ams .axh-feat-a-card{transform:translate(-50%,10px)}
.axh-feat-ams .axh-feat-a-hl{transform:translate(-50%,12px)}
.axh-feat-ams.axh-feat-p2 .axh-feat-a-state > :first-child{opacity:0}
.axh-feat-ams.axh-feat-p2 .axh-feat-a-state > :last-child{opacity:1; transform:none}
.axh-feat-ams.axh-feat-p3 .axh-feat-a-avs .axh-feat-av:nth-child(-n+2),
.axh-feat-ams.axh-feat-p4 .axh-feat-a-avs .axh-feat-av:nth-child(-n+4),
.axh-feat-ams.axh-feat-p5 .axh-feat-a-avs .axh-feat-av{opacity:1; transform:none}
.axh-feat-ams.axh-feat-p3 .axh-feat-a-fill{width:33%}
.axh-feat-ams.axh-feat-p4 .axh-feat-a-fill{width:75%}
.axh-feat-ams.axh-feat-p5 .axh-feat-a-fill{width:100%}
.axh-feat-ams.axh-feat-p6 .axh-feat-a-hl{opacity:1; transform:translateX(-50%)}
.axh-feat-ams:not(.axh-feat-ready) .axh-feat-a-card,.axh-feat-ams:not(.axh-feat-ready) .axh-feat-a-hl{transform:translateX(-50%)}
.axh-feat-ams:not(.axh-feat-ready) .axh-feat-a-avs .axh-feat-av{opacity:1; transform:none}
.axh-feat-ams:not(.axh-feat-ready) .axh-feat-a-fill{width:100%}


/* ============ athleteXhub product story · scoped styles ============ */
.axh-story{
  --axh-bg:#F7F7F7; --axh-card:#FFFFFF; --axh-line:#F0F0F1; --axh-line-2:#F0F0F1;
  --axh-ink:#242426; --axh-black:#0B0B0C; --axh-muted:#6B6B6F; --axh-soft:#F1F1F2;
  --axh-accent:#EDFF00;
  --axh-green:#444444; --axh-green-bg:#F3F3F4; --axh-green-line:#A1A1A6;
  --axh-orange:#444444; --axh-orange-bg:#F7F7F7; --axh-orange-line:#A1A1A6;
  --axh-gray:#444444; --axh-gray-bg:#F3F3F4;
  --axh-win-h:580px; --axh-side-w:232px; --axh-row:62px; --axh-frow:56px;
  --axh-ease:cubic-bezier(.2,.7,.2,1);
  container:axhstory / inline-size;
  display:block; position:relative; box-sizing:border-box;
  width:100%; max-width:1280px; margin:0 auto; padding:0;
  font-family:Poppins,"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:14px; font-weight:400; line-height:1.45; color:var(--axh-ink);
  letter-spacing:0; text-align:left; -webkit-font-smoothing:antialiased;
}
/* defensive reset against theme styles (inside component only) */
.axh-story *, .axh-story *::before, .axh-story *::after{box-sizing:border-box}
.axh-story div,.axh-story span,.axh-story p,.axh-story h2,.axh-story h3,.axh-story h4,.axh-story ul,.axh-story li,
.axh-story dl,.axh-story dt,.axh-story dd,.axh-story img,.axh-story article,.axh-story section,.axh-story header,
.axh-story button,.axh-story strong,.axh-story i{
  margin:0; padding:0; border:0; background:none; box-shadow:none; text-transform:none;
  font:inherit; color:inherit; letter-spacing:inherit; line-height:inherit; text-decoration:none; text-shadow:none; float:none;
}
.axh-story ul,.axh-story li{list-style:none}
.axh-story li::before,.axh-story li::marker{content:none}
.axh-story img{max-width:none; display:block; border-radius:0}
.axh-story .axh-story-sprite{position:absolute; width:0; height:0; overflow:hidden}
.axh-story .axh-story-ic{width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

/* ---------- Header ---------- */
.axh-story .axh-story-head{display:grid; text-align:center; max-width:780px; margin:0 auto 36px; padding:0 16px}
.axh-story .axh-story-head-item{grid-area:1/1; opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .22s ease, transform .22s ease, visibility 0s .22s}
.axh-story .axh-story-head-item.is-active{opacity:1; visibility:visible; transform:none;
  transition:opacity .45s var(--axh-ease) .26s, transform .55s var(--axh-ease) .26s, visibility 0s .26s}.axh-story .axh-story-eyebrow{display:inline-flex; align-items:center; gap:10px; padding:5px 12px 5px 6px; margin-bottom:18px;
  border:1px solid var(--axh-line); border-radius:999px; background:#FFFFFF;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--axh-ink)}
.axh-story .axh-story-eyebrow-n{background:var(--axh-black); color:#FFFFFF; border-radius:999px; padding:2px 8px; letter-spacing:.04em}
.axh-story .axh-story-h{font-size:clamp(28px,4.4cqw,50px); font-weight:500; line-height:1.08; letter-spacing:-.025em; color:var(--axh-black); text-wrap:balance}
.axh-story .axh-story-sub{margin-top:14px; font-size:clamp(15px,1.6cqw,18px); font-weight:300; color:var(--axh-muted); text-wrap:balance}

/* ---------- Stage ---------- */
.axh-story .axh-story-stage{position:relative; overflow:hidden; border-radius:32px; background:var(--axh-black); padding:44px 44px 22px; isolation:isolate}
.axh-story .axh-story-x{position:absolute; z-index:-1; right:-6%; top:-18%; width:62%; height:auto; fill:#151516; pointer-events:none}
.axh-story .axh-story-bezel{position:relative; max-width:1140px; margin:0 auto; padding:9px; border-radius:30px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12)}
.axh-story .axh-story-window{position:relative; height:var(--axh-win-h); overflow:hidden; border-radius:22px; background:var(--axh-bg); contain:layout paint}

/* ---------- Generic UI atoms (mirroring the athleteXhub app) ---------- */
.axh-story .axh-story-card{background:var(--axh-card); border:1px solid var(--axh-line); border-radius:20px}
.axh-story .axh-story-name{display:block; font-size:14px; font-weight:500; color:var(--axh-ink); line-height:1.3}
.axh-story .axh-story-name-lg{font-size:18px}
.axh-story .axh-story-meta{display:block; font-size:12px; font-weight:300; color:var(--axh-muted); line-height:1.4}
.axh-story .axh-story-row{display:flex; align-items:center; gap:12px}
.axh-story .axh-story-grow{flex:1; min-width:0; display:block}
.axh-story .axh-story-ell{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.axh-story .axh-story-tile{flex:none; display:inline-grid; place-items:center; width:36px; height:36px; border-radius:12px; background:var(--axh-soft); color:var(--axh-ink)}
.axh-story .axh-story-tile-sm{width:28px; height:28px; border-radius:9px}
.axh-story .axh-story-tile-sm .axh-story-ic{width:14px; height:14px}
.axh-story .axh-story-tile-ink{background:var(--axh-black); color:var(--axh-accent)}
.axh-story .axh-story-badge{display:inline-flex; align-items:center; white-space:nowrap; height:24px; padding:0 10px; border-radius:999px; font-size:11.5px; font-weight:500; border:1px solid transparent}
.axh-story .axh-story-badge-gray{background:var(--axh-gray-bg); color:var(--axh-gray); border-color:var(--axh-line)}
.axh-story .axh-story-badge-orange{background:var(--axh-orange-bg); color:var(--axh-orange); border-color:#F0F0F1}
.axh-story .axh-story-badge-green{background:var(--axh-green-bg); color:var(--axh-green); border-color:#F0F0F1}
.axh-story .axh-story-badge-line{background:#FFFFFF; border-color:var(--axh-green-line)}
.axh-story .axh-story-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 18px; border-radius:999px; font-size:13px; font-weight:500; white-space:nowrap; border:1px solid var(--axh-line)}
.axh-story .axh-story-btn-dark{background:#242426; border-color:#242426; color:#F7F7F7}
.axh-story .axh-story-btn-light{background:#FFFFFF; color:var(--axh-ink)}
.axh-story .axh-story-btn-block{display:flex; width:100%}
.axh-story .axh-story-brandmark{flex:none; display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--axh-black); color:#FFFFFF; font-size:13px; font-weight:600}
.axh-story .axh-story-states{display:inline-grid; justify-items:end}
.axh-story .axh-story-states > *{grid-area:1/1; opacity:0; transform:translateY(3px); transition:opacity .35s var(--axh-ease), transform .35s var(--axh-ease)}
.axh-story .axh-story-swap{position:relative; display:inline-grid}
.axh-story .axh-story-swap > span{grid-area:1/1; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:opacity .3s var(--axh-ease), transform .3s var(--axh-ease)}
.axh-story .axh-story-swap-b{opacity:0; transform:translateY(4px)}

/* ---------- Scenes ---------- */
.axh-story .axh-story-scene{position:absolute; inset:0; opacity:0; visibility:hidden; transform:scale(.99);
  transition:opacity .28s ease, transform .4s ease, visibility 0s .3s}
.axh-story .axh-story-scene.is-active{opacity:1; visibility:visible; transform:none;
  transition:opacity .45s var(--axh-ease) .28s, transform .6s var(--axh-ease) .28s, visibility 0s .28s}
.axh-story .axh-story-app{left:var(--axh-side-w)}

/* Scene 1 · fragments */
.axh-story .axh-story-s1{background-image:radial-gradient(circle,#F0F0F1 1px,transparent 1.2px); background-size:22px 22px; background-position:center}
.axh-story .axh-story-s1-canvas{position:absolute; left:50%; top:50%; width:760px; height:430px; transform:translate(-50%,-50%)}
.axh-story .axh-story-frag{position:absolute; padding:16px; box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 32px -12px rgba(0,0,0,.14);
  opacity:0; transform:translateY(16px) rotate(var(--axh-rot,0deg));
  transition:opacity .6s var(--axh-ease), transform .7s var(--axh-ease)}
.axh-story .axh-story-src{display:inline-block; margin-bottom:12px; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--axh-muted)}
.axh-story .axh-story-frag-a{--axh-rot:-2.2deg; left:0; top:22px; width:250px}
.axh-story .axh-story-frag-b{--axh-rot:1.6deg; left:300px; top:0; width:360px; transition-delay:.35s}
.axh-story .axh-story-frag-c{--axh-rot:-1deg; left:380px; top:248px; width:350px; transition-delay:.7s}
.axh-story .axh-story-frag-photo{width:100%; height:180px; object-fit:cover; border-radius:14px; background:var(--axh-soft); margin-bottom:12px}
.axh-story .axh-story-frag-info .axh-story-meta + .axh-story-meta{margin-top:2px}
.axh-story .axh-story-loc{display:flex; align-items:center; gap:4px}
.axh-story .axh-story-loc .axh-story-ic{width:13px; height:13px}
.axh-story .axh-story-quote{margin:14px 0; font-size:13px; font-weight:300; color:var(--axh-ink)}
.axh-story .axh-story-frag-c .axh-story-row{margin-bottom:14px}
.axh-story .axh-story-s1.axh-story-p1 .axh-story-frag{opacity:1; transform:rotate(var(--axh-rot,0deg))}

/* Scene 2 · discover */
.axh-story .axh-story-s2{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:28px}
.axh-story .axh-story-s2-bar{display:flex; align-items:center; gap:14px; width:100%; max-width:830px;
  opacity:0; transform:translateY(8px); transition:opacity .5s var(--axh-ease), transform .5s var(--axh-ease)}
.axh-story .axh-story-search{flex:1; display:flex; align-items:center; gap:10px; height:44px; padding:0 16px; border-radius:999px; background:#FFFFFF; border:1px solid var(--axh-line); font-size:13px; color:var(--axh-ink)}
.axh-story .axh-story-search .axh-story-ic{color:var(--axh-muted)}
.axh-story .axh-story-s2-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; width:100%; max-width:830px}
.axh-story .axh-story-acard{overflow:hidden; opacity:0; transform:translateY(14px);
  transition:opacity .55s var(--axh-ease), transform .6s var(--axh-ease), box-shadow .35s var(--axh-ease), border-color .35s}
.axh-story .axh-story-acard:nth-child(2){transition-delay:.1s}
.axh-story .axh-story-acard:nth-child(3){transition-delay:.2s}
.axh-story .axh-story-acard-media{position:relative}
.axh-story .axh-story-acard-media img{width:100%; height:168px; object-fit:cover; background:var(--axh-soft)}
.axh-story .axh-story-acard-body{padding:14px 16px 16px}
.axh-story .axh-story-chips{display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 14px}
.axh-story .axh-story-chip{display:inline-flex; align-items:center; height:24px; padding:0 9px; border-radius:999px; border:1px solid var(--axh-line); font-size:11.5px; color:var(--axh-ink); background:#FFFFFF; white-space:nowrap}
.axh-story .axh-story-match{display:flex; align-items:center; gap:10px; padding-top:12px; border-top:1px solid var(--axh-line-2)}
.axh-story .axh-story-match-l{font-size:11.5px; color:var(--axh-muted)}
.axh-story .axh-story-match-bar{flex:1; height:4px; border-radius:4px; background:var(--axh-soft); overflow:hidden}
.axh-story .axh-story-match-bar i{display:block; height:100%; background:var(--axh-ink); border-radius:4px}
.axh-story .axh-story-match-v{font-size:12.5px; font-weight:600}
.axh-story .axh-story-selected{position:absolute; left:10px; top:10px; display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 11px 0 8px; border-radius:999px;
  background:var(--axh-black); color:#FFFFFF; font-size:12px; font-weight:500; opacity:0; transform:translateY(-4px); transition:opacity .35s var(--axh-ease), transform .35s var(--axh-ease)}
.axh-story .axh-story-selected .axh-story-ic{width:14px; height:14px; stroke:var(--axh-accent); stroke-width:2.4}
.axh-story .axh-story-s2.axh-story-p1 .axh-story-s2-bar,
.axh-story .axh-story-s2.axh-story-p1 .axh-story-acard{opacity:1; transform:none}
.axh-story .axh-story-s2.axh-story-p2 .axh-story-acard{opacity:.5; transition-delay:0s}
.axh-story .axh-story-s2.axh-story-p2 .axh-story-acard-pick{opacity:1; border-color:var(--axh-black); box-shadow:0 0 0 1px var(--axh-black),0 18px 40px -18px rgba(0,0,0,.35); transform:translateY(-4px)}
.axh-story .axh-story-s2.axh-story-p2 .axh-story-selected{opacity:1; transform:none}

/* Scene 3 · connect */
.axh-story .axh-story-s3{display:flex; align-items:center; justify-content:center; padding:28px}
.axh-story .axh-story-s3-wrap{display:grid; grid-template-columns:340px 380px; gap:20px; align-items:stretch}
.axh-story .axh-story-detail{overflow:hidden; opacity:0; transform:scale(.97); transform-origin:center left; transition:opacity .5s var(--axh-ease), transform .7s var(--axh-ease)}
.axh-story .axh-story-detail-photo{width:100%; height:200px; object-fit:cover; background:var(--axh-soft)}
.axh-story .axh-story-detail-body{padding:18px 20px 20px}
.axh-story .axh-story-facts,.axh-story .axh-story-terms{display:block; margin-top:14px}
.axh-story .axh-story-facts > div,.axh-story .axh-story-terms > div{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--axh-line-2)}
.axh-story .axh-story-facts dt,.axh-story .axh-story-terms dt{font-size:12.5px; font-weight:300; color:var(--axh-muted)}
.axh-story .axh-story-facts dd,.axh-story .axh-story-terms dd{font-size:13px; font-weight:500; text-align:right}
.axh-story .axh-story-proposal{display:flex; flex-direction:column; padding:20px; opacity:0; transform:translateY(12px); transition:opacity .5s var(--axh-ease) .15s, transform .6s var(--axh-ease) .15s}
.axh-story .axh-story-terms{margin:16px 0 18px; flex:1}
.axh-story .axh-story-pair{display:inline-flex; flex:none}
.axh-story .axh-story-pair img{width:32px; height:32px; border-radius:50%; object-fit:cover; margin-left:-8px; border:2px solid #FFFFFF; background:var(--axh-soft)}
.axh-story .axh-story-pair .axh-story-brandmark{border:2px solid #FFFFFF; width:34px; height:34px; margin-top:-1px}
.axh-story .axh-story-note{display:flex; align-items:center; justify-content:center; gap:8px; height:20px; margin-top:12px; font-size:12px; color:var(--axh-muted); opacity:0; transition:opacity .4s var(--axh-ease)}
.axh-story .axh-story-dot{width:7px; height:7px; border-radius:50%; background:#6B6B6F}
.axh-story .axh-story-states .axh-story-st0{opacity:1; transform:none}
.axh-story .axh-story-s3.axh-story-p1 .axh-story-detail,
.axh-story .axh-story-s3.axh-story-p1 .axh-story-proposal{opacity:1; transform:none}
.axh-story .axh-story-s3.axh-story-p2 .axh-story-st0{opacity:0}
.axh-story .axh-story-s3.axh-story-p2 .axh-story-st1{opacity:1; transform:none}
.axh-story .axh-story-s3.axh-story-p3 .axh-story-st1{opacity:0}
.axh-story .axh-story-s3.axh-story-p3 .axh-story-st2{opacity:1; transform:none}
.axh-story .axh-story-s3.axh-story-p2 .axh-story-btn-dark{background:var(--axh-soft); border-color:var(--axh-line); color:var(--axh-ink); transition:background .3s, color .3s, border-color .3s}
.axh-story .axh-story-s3.axh-story-p2 .axh-story-swap-a,
.axh-story .axh-story-s5.axh-story-p2 .axh-story-swap-a{opacity:0; transform:translateY(-4px)}
.axh-story .axh-story-s3.axh-story-p2 .axh-story-swap-b,
.axh-story .axh-story-s5.axh-story-p2 .axh-story-swap-b{opacity:1; transform:none}
.axh-story .axh-story-s3.axh-story-p3 .axh-story-note{opacity:1}

/* ---------- AMS shell ---------- */
.axh-story .axh-story-side{position:absolute; z-index:2; left:10px; top:10px; bottom:10px; width:calc(var(--axh-side-w) - 20px);
  display:flex; flex-direction:column; padding:22px 16px 16px; background:#FFFFFF; border-radius:18px;
  opacity:0; visibility:hidden; transform:translateX(-18px);
  transition:opacity .5s var(--axh-ease), transform .6s var(--axh-ease), visibility 0s .5s}
.axh-story .axh-story-window[data-shell="app"] .axh-story-side{opacity:1; visibility:visible; transform:none; transition-delay:0s}
.axh-story .axh-story-side .axh-story-logo{width:136px; height:auto; margin:0 0 20px 6px}
.axh-story .axh-story-seg{display:flex; gap:2px; padding:4px; margin-bottom:18px; border:1px solid var(--axh-line); border-radius:999px; background:var(--axh-bg)}
.axh-story .axh-story-seg span{flex:1; display:flex; align-items:center; justify-content:center; gap:6px; height:32px; border-radius:999px; font-size:12px; color:var(--axh-muted)}
.axh-story .axh-story-seg span.is-on{background:#FFFFFF; color:var(--axh-ink); box-shadow:0 1px 2px rgba(0,0,0,.06); border:1px solid var(--axh-line)}
.axh-story .axh-story-seg .axh-story-ic{width:14px; height:14px}
.axh-story .axh-story-side-nav{display:flex; flex-direction:column; gap:4px}
.axh-story .axh-story-nav-item{display:flex; align-items:center; gap:12px; height:42px; padding:0 14px; border-radius:999px; font-size:13px; color:var(--axh-ink); transition:background .35s var(--axh-ease), color .35s var(--axh-ease)}
.axh-story .axh-story-nav-item .axh-story-ic{width:18px; height:18px; stroke-width:1.4}
.axh-story .axh-story-window[data-nav="overview"] [data-axh-nav="overview"],
.axh-story .axh-story-window[data-nav="announcements"] [data-axh-nav="announcements"]{background:var(--axh-black); color:#FFFFFF; font-weight:600}
.axh-story .axh-story-side-foot{display:flex; align-items:center; gap:10px; margin-top:auto; padding:14px 6px 2px; border-top:1px solid var(--axh-line-2)}
.axh-story .axh-story-mhead,.axh-story .axh-story-mnav{display:none}

/* Page */
.axh-story .axh-story-page{position:absolute; inset:0; display:flex; flex-direction:column; padding:26px 26px 22px 16px}
.axh-story .axh-story-page-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px}
.axh-story .axh-story-title{font-size:22px; font-weight:500; line-height:1.2; color:var(--axh-ink)}
.axh-story .axh-story-page-sub{font-size:13px; margin-top:4px}
.axh-story .axh-story-actions{display:flex; gap:10px}
.axh-story .axh-story-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:14px}
.axh-story .axh-story-kpi{padding:16px 20px}
.axh-story .axh-story-kpi-l{font-size:12.5px; font-weight:300; color:var(--axh-muted)}
.axh-story .axh-story-kpi-v{margin:2px 0 1px; font-size:24px; font-weight:500; line-height:1.3}
.axh-story .axh-story-kpi-f{font-size:12px; font-weight:300; color:var(--axh-muted)}
.axh-story .axh-story-flip{display:inline-grid; overflow:hidden; vertical-align:bottom}
.axh-story .axh-story-flip > span{grid-area:1/1; transition:transform .5s var(--axh-ease), opacity .5s var(--axh-ease)}
.axh-story .axh-story-flip-b{transform:translateY(80%); opacity:0}
.axh-story .axh-story-cols{flex:1; min-height:0; display:grid; grid-template-columns:1.45fr 1fr; gap:14px}
.axh-story .axh-story-panel{display:flex; flex-direction:column; min-height:0; padding:16px 20px 12px; overflow:hidden}
.axh-story .axh-story-panel-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px}
.axh-story .axh-story-panel-t{font-size:15px; font-weight:500}
.axh-story .axh-story-clip{position:relative; overflow:hidden}
.axh-story .axh-story-li{display:flex; align-items:center; gap:12px; height:var(--axh-row); border-top:1px solid var(--axh-line-2)}
.axh-story .axh-story-li:first-child{border-top:0}
.axh-story .axh-story-av{flex:none; width:38px; height:38px; border-radius:50%; object-fit:cover; object-position:50% 30%; background:var(--axh-soft)}
.axh-story .axh-story-av-i{display:inline-grid; place-items:center; font-size:12px; font-weight:500; color:var(--axh-ink); background:#F0F0F1; border:1px solid var(--axh-line)}
.axh-story .axh-story-when{min-width:72px; text-align:right; flex:none; white-space:nowrap}
.axh-story .axh-story-li .axh-story-name{display:flex; align-items:center; white-space:nowrap; overflow:hidden}
.axh-story .axh-story-li .axh-story-new{flex:none}
.axh-story .axh-story-li .axh-story-meta{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.axh-story .axh-story-new{display:inline-flex; align-items:center; height:18px; padding:0 7px; margin-left:6px; border-radius:999px; background:var(--axh-accent); color:var(--axh-black); font-size:10.5px; font-weight:600; vertical-align:1px}
.axh-story .axh-story-fi{display:flex; align-items:center; gap:12px; height:var(--axh-frow); border-top:1px solid var(--axh-line-2)}
.axh-story .axh-story-fi:first-child{border-top:0}
.axh-story .axh-story-fi .axh-story-tile{width:32px; height:32px; border-radius:50%}
.axh-story .axh-story-fi .axh-story-name{font-size:13px}

/* Scene 4 events */
.axh-story .axh-story-s4 .axh-story-slide{transform:translateY(calc(var(--axh-row) * -1)); transition:transform .7s var(--axh-ease)}
.axh-story .axh-story-s4 .axh-story-li-new{opacity:0; transition:opacity .5s var(--axh-ease) .2s}
.axh-story .axh-story-s4 .axh-story-s4-feed .axh-story-fi:first-child{opacity:0; transition:opacity .5s var(--axh-ease) .3s}
.axh-story .axh-story-s4.axh-story-p2 .axh-story-slide{transform:none}
.axh-story .axh-story-s4.axh-story-p2 .axh-story-li-new,
.axh-story .axh-story-s4.axh-story-p2 .axh-story-s4-feed .axh-story-fi:first-child{opacity:1}
.axh-story .axh-story-s4.axh-story-p2 .axh-story-flip-a{transform:translateY(-80%); opacity:0}
.axh-story .axh-story-s4.axh-story-p2 .axh-story-flip-b{transform:none; opacity:1}

/* Scene 5 */
.axh-story .axh-story-s5-cols{grid-template-columns:1fr 1fr}
.axh-story .axh-story-composer{padding:18px 20px 18px; transition:opacity .6s var(--axh-ease)}
.axh-story .axh-story-composer .axh-story-panel-head{margin-bottom:14px}
.axh-story .axh-story-field{display:block; padding:10px 14px; margin-bottom:10px; border:1px solid var(--axh-line); border-radius:14px; background:#FFFFFF}
.axh-story .axh-story-flabel{display:block; font-size:11px; font-weight:300; color:var(--axh-muted)}
.axh-story .axh-story-fval{display:block; font-size:13.5px; font-weight:500}
.axh-story .axh-story-fval-muted{font-weight:300; color:var(--axh-ink)}
.axh-story .axh-story-attach{display:flex; align-items:center; gap:10px; padding:8px 12px 8px 8px; border-radius:14px; background:var(--axh-bg); border:1px dashed #F0F0F1; font-size:12.5px; font-weight:500}
.axh-story .axh-story-attach-n{flex:1; min-width:0}
.axh-story .axh-story-composer-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:14px}
.axh-story .axh-story-recip{display:flex; align-items:center; gap:8px; white-space:nowrap; font-size:12.5px; color:var(--axh-muted); font-weight:300}
.axh-story .axh-story-recip strong{font-weight:600; color:var(--axh-ink)}
.axh-story .axh-story-clip-feed{height:calc(var(--axh-frow) * 4)}
.axh-story .axh-story-s5 .axh-story-slide{transform:translateY(calc(var(--axh-frow) * -1)); transition:transform .7s var(--axh-ease)}
.axh-story .axh-story-s5 .axh-story-li-new{opacity:0; transition:opacity .5s var(--axh-ease) .2s}
.axh-story .axh-story-soon{display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding:10px 12px; border:1px dashed #F0F0F1; border-radius:14px; opacity:0; transition:opacity .5s var(--axh-ease)}
.axh-story .axh-story-soon .axh-story-name{font-size:13px; color:var(--axh-muted); font-weight:400}
.axh-story .axh-story-s5 .axh-story-states .axh-story-st0{opacity:1; transform:none}
.axh-story .axh-story-s5.axh-story-p2 .axh-story-st0{opacity:0}
.axh-story .axh-story-s5.axh-story-p2 .axh-story-st1{opacity:1; transform:none}
.axh-story .axh-story-s5.axh-story-p3 .axh-story-slide{transform:none}
.axh-story .axh-story-s5.axh-story-p3 .axh-story-li-new{opacity:1}
.axh-story .axh-story-s5.axh-story-p4 .axh-story-composer{opacity:.55}
.axh-story .axh-story-s5.axh-story-p4 .axh-story-soon{opacity:1}

/* ---------- Cursor ---------- */
.axh-story .axh-story-cursor{position:absolute; z-index:5; left:0; top:0; pointer-events:none; opacity:0;
  transform:translate3d(78%,105%,0); transition:transform .95s cubic-bezier(.45,.05,.2,1), opacity .35s}
.axh-story .axh-story-cursor.is-on{opacity:1}
.axh-story .axh-story-cursor.is-jump{transition:none}
.axh-story .axh-story-cursor-arrow{display:block; width:22px; height:22px; fill:var(--axh-black); stroke:#FFFFFF; stroke-width:1.4; stroke-linejoin:round; transition:transform .15s}
.axh-story .axh-story-cursor.is-press .axh-story-cursor-arrow{transform:scale(.82)}
.axh-story .axh-story-cursor-tag{position:absolute; left:16px; top:18px; padding:3px 9px; border-radius:999px; background:var(--axh-accent); color:var(--axh-black); font-size:11.5px; font-weight:600; white-space:nowrap; box-shadow:0 2px 6px rgba(0,0,0,.18)}

/* ---------- Controls ---------- */
.axh-story .axh-story-bar{display:flex; align-items:center; gap:28px; max-width:1140px; margin:18px auto 0}
.axh-story .axh-story-steps{flex:1; display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.axh-story .axh-story-step{display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:8px; row-gap:10px; min-height:48px; padding:6px 0; cursor:pointer; text-align:left; color:rgba(255,255,255,.55); border-radius:8px; transition:color .3s}
.axh-story .axh-story-step:hover{color:rgba(255,255,255,.85)}
.axh-story .axh-story-step.is-active{color:#FFFFFF}
.axh-story .axh-story-track{grid-column:1/-1; display:block; height:2px; border-radius:2px; background:rgba(255,255,255,.16); overflow:hidden}
.axh-story .axh-story-fill{display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left; background:rgba(255,255,255,.5)}
.axh-story .axh-story-step.is-done .axh-story-fill{transform:scaleX(1)}
.axh-story .axh-story-step.is-active .axh-story-fill{background:var(--axh-accent); animation:axh-story-fill var(--axh-dur,5s) linear forwards}
.axh-story.axh-story-halted .axh-story-step.is-active .axh-story-fill{animation-play-state:paused}
.axh-story.axh-story-static .axh-story-step.is-active .axh-story-fill{animation:none; transform:scaleX(1)}
@keyframes axh-story-fill{from{transform:scaleX(0)} to{transform:scaleX(1)}}
.axh-story .axh-story-step-n{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:11px; letter-spacing:.04em; opacity:.8}
.axh-story .axh-story-step-l{font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.axh-story .axh-story-ctrls{display:flex; gap:8px}
.axh-story .axh-story-ctrl{display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#FFFFFF; transition:background .25s}
.axh-story .axh-story-ctrl:hover{background:rgba(255,255,255,.16)}
.axh-story .axh-story-ctrl svg{width:18px; height:18px}
.axh-story .axh-story-toggle svg{fill:currentColor}
.axh-story .axh-story-replay svg{fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.axh-story .axh-story-i-play{display:none}
.axh-story.axh-story-paused .axh-story-i-play{display:block}
.axh-story.axh-story-paused .axh-story-i-pause{display:none}
.axh-story .axh-story-step:focus-visible,.axh-story .axh-story-ctrl:focus-visible{outline:2px solid var(--axh-accent); outline-offset:3px}
.axh-story .axh-story-step:focus:not(:focus-visible),.axh-story .axh-story-ctrl:focus:not(:focus-visible){outline:none}
.axh-story .axh-story-foot{margin-top:14px; text-align:center; font-size:12px; font-weight:300; color:var(--axh-muted)}

/* No-JS / pre-init fallback: show scene 1 fully */
.axh-story:not(.axh-story-ready) .axh-story-s1 .axh-story-frag{opacity:1; transform:rotate(var(--axh-rot,0deg))}
.axh-story:not(.axh-story-ready) .axh-story-bar{display:none}

/* Reduced motion: static states */
.axh-story.axh-story-reduced *, .axh-story.axh-story-reduced *::before, .axh-story.axh-story-reduced *::after{transition:none !important; animation:none !important}
.axh-story.axh-story-reduced .axh-story-ctrls{display:none}
.axh-story.axh-story-reduced .axh-story-step.is-active .axh-story-fill{transform:scaleX(1)}

/* ================= Tablet ================= */
@container axhstory (max-width: 1000px){
  .axh-story{--axh-win-h:560px; --axh-side-w:206px}
  .axh-story .axh-story-stage{padding:28px 24px 16px; border-radius:28px}
  .axh-story .axh-story-bezel{padding:7px; border-radius:26px}
  .axh-story .axh-story-window{border-radius:20px}
  .axh-story .axh-story-s1-canvas{transform:translate(-50%,-50%) scale(.86)}
  .axh-story .axh-story-s2-grid{gap:12px}
  .axh-story .axh-story-acard-media img{height:140px}
  .axh-story .axh-story-acard-body{padding:12px 13px 14px}
  .axh-story .axh-story-s3-wrap{grid-template-columns:minmax(0,300px) minmax(0,340px); gap:14px}
  .axh-story .axh-story-side{padding:18px 12px 14px}
  .axh-story .axh-story-side .axh-story-logo{width:118px}
  .axh-story .axh-story-page{padding:22px 18px 18px 10px}
  .axh-story .axh-story-actions .axh-story-btn-light{display:none}
  .axh-story .axh-story-s4-cols{grid-template-columns:1fr}
  .axh-story .axh-story-s4-feed{display:none}
  .axh-story .axh-story-s5-cols{grid-template-columns:1fr 1fr; gap:12px}
  .axh-story .axh-story-composer,.axh-story .axh-story-panel{padding-left:16px; padding-right:16px}
  .axh-story .axh-story-field-msg{display:none}
  .axh-story .axh-story-bar{gap:16px}
  .axh-story .axh-story-step-l{font-size:12px}
}
@container axhstory (max-width: 820px){
  .axh-story .axh-story-s1-canvas{transform:translate(-50%,-50%) scale(.74)}
  .axh-story .axh-story-acard .axh-story-chip:nth-child(2){display:none}
  .axh-story .axh-story-s5-cols{grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); gap:10px}
  .axh-story .axh-story-composer .axh-story-composer-foot{margin-top:0}
  .axh-story .axh-story-clip-feed{height:calc(var(--axh-frow) * 3)}
  .axh-story .axh-story-soon{display:none}
  .axh-story .axh-story-s5.axh-story-p4 .axh-story-composer{opacity:1}
}

/* ================= Mobile (purpose-built) ================= */
@container axhstory (max-width: 640px){
  .axh-story{--axh-win-h:600px; --axh-row:58px; --axh-frow:54px}
  .axh-story .axh-story-head{margin-bottom:24px; padding:0 4px}
  .axh-story .axh-story-eyebrow{margin-bottom:14px}
  .axh-story .axh-story-h{font-size:clamp(26px,8cqw,34px)}
  .axh-story .axh-story-sub{font-size:15px; margin-top:10px}
  .axh-story .axh-story-stage{padding:12px 10px 8px; border-radius:24px}
  .axh-story .axh-story-x{width:120%; right:-40%; top:-6%}
  .axh-story .axh-story-bezel{padding:5px; border-radius:22px}
  .axh-story .axh-story-window{border-radius:17px}

  /* S1: stacked editorial composition */
  .axh-story .axh-story-s1-canvas{left:0; top:0; width:100%; height:100%; transform:none}
  .axh-story .axh-story-frag{width:auto; padding:14px}
  .axh-story .axh-story-frag-a{left:16px; right:46px; top:28px}
  .axh-story .axh-story-frag-b{left:42px; right:14px; top:212px}
  .axh-story .axh-story-frag-c{left:22px; right:30px; top:412px}
  .axh-story .axh-story-frag-athlete{display:flex; align-items:center; gap:14px}
  .axh-story .axh-story-frag-photo{width:84px; height:84px; margin:0; border-radius:14px; flex:none}
  .axh-story .axh-story-quote{margin:12px 0}

  /* S2: vertically stacked profiles */
  .axh-story .axh-story-s2{justify-content:flex-start; gap:12px; padding:16px 12px}
  .axh-story .axh-story-s2-bar .axh-story-meta{display:none}
  .axh-story .axh-story-search{height:42px; font-size:12.5px}
  .axh-story .axh-story-s2-grid{grid-template-columns:1fr; gap:10px}
  .axh-story .axh-story-acard{display:grid; grid-template-columns:92px minmax(0,1fr); border-radius:18px}
  .axh-story .axh-story-acard-body{min-width:0}
  .axh-story .axh-story-acard .axh-story-meta{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .axh-story .axh-story-acard .axh-story-chip{padding:0 7px; font-size:11px}
  .axh-story .axh-story-acard-media img{width:92px; height:100%; min-height:148px}
  .axh-story .axh-story-acard-body{padding:12px 12px 12px 14px}
  .axh-story .axh-story-chips{margin:8px 0 10px}
  .axh-story .axh-story-acard .axh-story-chip:nth-child(2){display:inline-flex}
  .axh-story .axh-story-acard .axh-story-chips{flex-wrap:nowrap; overflow:hidden}
  .axh-story .axh-story-match{padding-top:9px}
  .axh-story .axh-story-selected{left:6px; top:6px; width:26px; height:26px; padding:0; justify-content:center; font-size:11px}
  .axh-story .axh-story-selected [data-t]{display:none}
  .axh-story .axh-story-s2.axh-story-p2 .axh-story-acard-pick{transform:none}

  /* S3: compact athlete header + proposal */
  .axh-story .axh-story-s3{padding:16px 12px}
  .axh-story .axh-story-s3-wrap{grid-template-columns:1fr; gap:10px; width:100%}
  .axh-story .axh-story-detail{display:grid; grid-template-columns:64px 1fr; align-items:center; gap:14px; padding:12px}
  .axh-story .axh-story-detail-photo{width:64px; height:64px; border-radius:14px}
  .axh-story .axh-story-detail-body{padding:0}
  .axh-story .axh-story-name-lg{font-size:16px}
  .axh-story .axh-story-facts{display:none}
  .axh-story .axh-story-proposal{padding:16px}
  .axh-story .axh-story-terms{margin:12px 0 16px}

  /* Shell: app header + bottom tabs instead of sidebar */
  .axh-story .axh-story-side{display:none}
  .axh-story .axh-story-app{left:0; top:56px; bottom:64px}
  .axh-story .axh-story-mhead,.axh-story .axh-story-mnav{display:flex; position:absolute; z-index:2; left:0; right:0; background:#FFFFFF;
    opacity:0; visibility:hidden; transition:opacity .5s var(--axh-ease), transform .6s var(--axh-ease), visibility 0s .5s}
  .axh-story .axh-story-mhead{top:0; height:56px; align-items:center; justify-content:space-between; padding:0 14px 0 16px; border-bottom:1px solid var(--axh-line); transform:translateY(-10px)}
  .axh-story .axh-story-mhead .axh-story-logo{width:108px; height:auto}
  .axh-story .axh-story-mnav{bottom:0; height:64px; padding:6px 6px 8px; border-top:1px solid var(--axh-line); transform:translateY(12px)}
  .axh-story .axh-story-window[data-shell="app"] .axh-story-mhead,
  .axh-story .axh-story-window[data-shell="app"] .axh-story-mnav{opacity:1; visibility:visible; transform:none; transition-delay:0s}
  .axh-story .axh-story-mnav .axh-story-nav-item{flex:1; flex-direction:column; justify-content:center; gap:3px; height:auto; padding:0; border-radius:14px; font-size:9.5px; white-space:nowrap}
  .axh-story .axh-story-window[data-nav="overview"] .axh-story-mnav [data-axh-nav="overview"],
  .axh-story .axh-story-window[data-nav="announcements"] .axh-story-mnav [data-axh-nav="announcements"]{background:var(--axh-black); color:#FFFFFF; font-weight:500}
  .axh-story .axh-story-page{padding:16px 12px 12px}
  .axh-story .axh-story-page-head{margin-bottom:12px}
  .axh-story .axh-story-title{font-size:18px}
  .axh-story .axh-story-page-sub{font-size:12px}
  .axh-story .axh-story-actions{display:none}
  .axh-story .axh-story-kpis{gap:8px; margin-bottom:10px}
  .axh-story .axh-story-kpi{padding:10px 12px; border-radius:16px}
  .axh-story .axh-story-kpi-l{font-size:10.5px; line-height:1.25; min-height:26px}
  .axh-story .axh-story-kpi-v{font-size:20px}
  .axh-story .axh-story-kpi-f{display:none}
  .axh-story .axh-story-panel{padding:12px 14px 6px; border-radius:18px}
  .axh-story .axh-story-li .axh-story-badge{display:none}
  .axh-story .axh-story-when{min-width:0; font-size:11px}
  .axh-story .axh-story-li-new .axh-story-when{display:none}
  .axh-story .axh-story-av{width:34px; height:34px}
  .axh-story .axh-story-composer{padding:14px}
  .axh-story .axh-story-composer .axh-story-panel-head{margin-bottom:10px}
  .axh-story .axh-story-field{padding:8px 12px; margin-bottom:8px}
  .axh-story .axh-story-composer-foot{padding-top:10px}
  .axh-story .axh-story-composer-foot .axh-story-btn{height:38px; padding:0 14px}
  .axh-story .axh-story-s5-cols{grid-template-columns:1fr; grid-template-rows:auto 1fr; gap:10px}
  .axh-story .axh-story-s5 .axh-story-page-sub{display:none}
  .axh-story .axh-story-s5{--axh-frow:50px}

  /* Controls: numbers + tracks only, label lives in the eyebrow above */
  .axh-story .axh-story-bar{gap:10px; margin-top:10px; padding:0 4px}
  .axh-story .axh-story-steps{gap:6px}
  .axh-story .axh-story-step{grid-template-columns:1fr; row-gap:8px; min-height:44px}
  .axh-story .axh-story-step-l{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .axh-story .axh-story-ctrl{width:40px; height:40px}
  .axh-story .axh-story-ctrls{gap:6px}
  .axh-story .axh-story-foot{font-size:11px; padding:0 8px}
}
@container axhstory (max-width: 360px){
  .axh-story .axh-story-frag-a{right:24px}
  .axh-story .axh-story-frag-b{left:24px}
  .axh-story .axh-story-mnav .axh-story-nav-item{font-size:8.5px}
  .axh-story .axh-story-acard{grid-template-columns:80px minmax(0,1fr)}
  .axh-story .axh-story-acard-media img{width:80px}
}